Javascript draw into new image

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|674\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Misc Languages -> Javascript draw into new image
Sun, 29 May 2022, 13:48
Pakz	Javascript draw into new image. I think it is impossible to use google to find a answer to this problem. I simply want to use the javascript draw commands to work on a image. Do I need to set the context to a image? Or some other kind of voodoo?
Sun, 29 May 2022, 14:29
Pakz	Well. I give up. I think it must be a security issue. I can modify a image per pixel. But not use regular draw commands on them.
Sun, 29 May 2022, 15:29
Jayenkai	It probably is possible, but like you say, security and whatnot are the likely reason you can't. Instead, create a canvas, draw using standard canvas drawing commands, then use the canvas.toDataURL() to convert the canvas' current content into an image. function CanvasToImage() { let canvas = document.getElementById("canvas"); let canvasAsImage = new Image(); canvasAsImage.src = canvas.toDataURL(); return canvasAsImage; } --v -=-=- ''Load, Next List!''
Sun, 29 May 2022, 15:54
Jayenkai	<html> <script> var MyCanvas; var MyContext; function init() { MyCanvas = document.getElementById("DrawCanvas"); MyContext = MyCanvas.getContext('2d'); requestAnimationFrame(DrawLine); } function DrawLine() { MyContext.beginPath(); MyContext.strokeStyle = "rgb("+(Math.random()256)+","+(Math.random()256)+","+(Math.random()256)+")"; MyContext.moveTo(Math.random()320,Math.random()240); MyContext.lineTo(Math.random()320,Math.random()*240); MyContext.closePath(); MyContext.stroke(); requestAnimationFrame(DrawLine); // Request another frame } function Snapshot() { let CurrentFrame = new Image(); CurrentFrame.src = MyCanvas.toDataURL(); el=document.getElementById("ImageOutput"); el.appendChild(CurrentFrame); } </script> <body onload="init()"> <a href="#" onclick="Snapshot()">Click to Snap</a></br> <canvas id="DrawCanvas" style="width:320px;height:240px;"></canvas></br> <div id="ImageOutput">Images go here</br></div> </body> </html> --v This should help you get your foot on the ground, here, I think.. ... Maybe! -=-=- ''Load, Next List!''
Sun, 29 May 2022, 21:49
Pakz	Yes! It took me a bit of reading and experimenting. But I was able to modify it to fit into my code. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <title>Hello, world!</title> </head> <body> <canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;"> Use different browser. <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // create our image and draw onto it. let myim = CanvasToImage(); // our gameloop gameloop=setInterval(doGameLoop,333); function doGameLoop(){ myCanvas.width = window.innerWidth; myCanvas.height = window.innerHeight-32; myCanvas.width = window.innerWidth-32; ctx.fillStyle="rgb(100,0,0)"; ctx.fillRect(0,0,c.width,c.height); ctx.fillStyle="rgb(255,255,255)"; ctx.fillText("Drawing a tilemap example.",10,10); ctx.drawImage(myim,Math.random()320,Math.random()240); } // create a image function CanvasToImage() { let canvas = document.getElementById("myCanvas"); let canvasAsImage = new Image(64,64); let cv=canvas.getContext("2d"); cv.fillStyle='green'; cv.fillText("Hello",10,10); cv.fillRect(0,0,64,4); cv.fillRect(0,64-4,64,4); canvasAsImage.src = canvas.toDataURL(); return canvasAsImage; } </script> </body> </html> --v I spent a couple of hours yesterday trying to find how to do this. Google gets confused with words like into and on top of. It also does not help that every one tries to beat the search results to display their pages that offer no real help. One page even showed 1 snippet with a thousand search words below it.
Mon, 30 May 2022, 02:31
Jayenkai	Further importance, If you're going to start dabbling with javascript, though the browsers should all be safe with basic operations like this, security issues might arise. Be sure to test on Firefox and a Chromium based browser, to be sure it works on at least those two main things. You also have your mobile, too. Additionally, be sure to test the differences between what happens when you run it from your desktop, and what happens when you run it from a server, as .. again, security might intervene, Audio is particularly annoying when doing this. But otherwise you should be good to go! JavaScript isn't "too" different from basic. -=-=- ''Load, Next List!''
Mon, 30 May 2022, 03:45
Pakz	Mostly I'm trying to keep up to date with Javascript. I have a couple of new books that also use some Javascript. I have a old javascript 'getting started' repo. Having it with enough examples so I can quickly do most stuff. https://github.com/Pakz001/html5examples
Tue, 31 May 2022, 09:12
cyangames	I try and keep a good distance behind with Javascript, that ol' problem of older browsers and users hanging on to them means I can't really experiment with newer stuff at work much. Best of luck with it though -=-=- Web / Game Dev, occasionally finishes off coding games also!
Tue, 31 May 2022, 10:00
Jayenkai	Yeah, the more simplistic the things you use, the more compatible it all should be. Drawing to canvas is "usually" a basic thing. I've purposely avoided using WebGL, so far, since a lot of older mobile devices tend not to have it on by default. -=-=- ''Load, Next List!''

Javascript draw into new image.