how to create a canvas dynamically in javascript

Question

I have a canvas that you can draw things with mouse.. When I click the button It has to capture the drawing and add it right under the canvas, and clear the previous one to draw something new..So first canvas has to be static and the other ones has to be created dynamically with the drawing that I draw .. What should I do can anybody help

here is jsfiddle http://jsfiddle.net/dQppK/378/

var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
painting = false,
lastX = 0,
lastY = 0;

is this not sufficient? http://stackoverflow.com/a/2142549/1180785 — Dave, Aug 08 '13 at 00:05
looking at your code: you implemented your own line rasteriser? Use the built-in functionality! http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/ (your code lags behind the mouse) — Dave, Aug 08 '13 at 00:08
what do you mean by lag? it works clearly when you click on canvas you can draw when you click it again drawing action stopped.. — regeme, Aug 08 '13 at 00:12
the line doesn't keep up with the mouse. If you used the built-in line drawing tools it would keep up better. In a language like C or maybe even Java, making your own line drawing method is A-OK. But in JavaScript? Nope. Especially not if you're drawing each pixel by filling a rectangle. — Dave, Aug 08 '13 at 00:14
Dave : yes for speed, but in the same time the 8-bit look of an non-antialiased line is nice... — GameAlchemist, Aug 08 '13 at 00:49

score 1 · Answer 1 · answered Aug 08 '13 at 00:14

1

You can create a new canvas the same way you’d create any element:

var newCanvas = document.createElement('canvas');

Then you can copy over your old canvas:

newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
oldCanvas.parentNode.replaceChild(newCanvas, oldCanvas);
ctx = newCanvas.getContext('2d');

But if you’re just looking to clear your drawing surface, what’s wrong with clearRect?

ctx.clearRect(0, 0, canvas.width, canvas.height);

Or, in your case, another fillRect. Updated demo

answered Aug 08 '13 at 00:14

Ry-

218,210
55
464
476

newCanvas has to be generated with button onclick. how to do that? – regeme Aug 08 '13 at 00:18
@regeme: Don’t. Use `fillRect`. – Ry- Aug 08 '13 at 00:19
I appreciate for your help but the vital part of this issue is to generate a new canvas with button onclick, the generated canvas also has to get the drawing that I draw in previous canvas.. This is the tough part If you could help it would be fantastic – regeme Aug 08 '13 at 00:29
1

@regeme: I have. It’s literally a matter of copying and pasting those first two pieces of code into your button’s `onclick` handler. Also, why do you feel you really, really, really need to generate a new canvas? – Ry- Aug 08 '13 at 00:37
because each new canvas has to generate the different drawings.. Is your code work for that cause I couldnt implement it – regeme Aug 08 '13 at 00:59
http://jsfiddle.net/dQppK/392/ I did as you said but it did not work can you please check it – regeme Aug 08 '13 at 01:03
I am new to this js and I call function on mouse click as you said but it still not works ahhh It makes me mad – regeme Aug 08 '13 at 01:51

score 0 · Answer 2 · answered Aug 08 '13 at 00:10

0

here's the function i use for this, it is part of a library i made and use to ease a few things about canvas. I just put it on github in case other function might be be of use, i'll have to make a readme later...

https://github.com/gamealchemist/CanvasLib

with namespaceing removed, the code is as follow to insert a canvas :

// insert a canvas on top of the current document.
// If width, height are not provided, use all document width / height
// width / height unit is Css pixel.
// returns the canvas.
insertMainCanvas = function insertMainCanvas (_w,_h) {
   if (_w==undefined) { _w = document.documentElement.clientWidth & (~3)  ; }
   if (_h==undefined) { _h = document.documentElement.clientHeight & (~3) ; }
   var mainCanvas = ga.CanvasLib.createCanvas(_w,_h);
   if ( !document.body ) { 
          var aNewBodyElement = document.createElement("body"); 
              document.body = aNewBodyElement; 
   };
   document.body.appendChild(mainCanvas);
   return mainCanvas;
}

answered Aug 08 '13 at 00:10

GameAlchemist

18,995
7
36
59

`& (~3)`? What? This is silly. And so is creating a ``. And so is a semicolon after a block. – Ry- Aug 08 '13 at 00:11
no this is not silly 1) & (~3) is a rounding to the nearest 16 multiple, to allow faster block handling 2) creating a body allows to have an almost empty html file (and prevent failure in case there's none). for the semicolon, the js engine might survive i guess. I think one can build its own solution on top of this code anyway. – GameAlchemist Aug 08 '13 at 00:16
`& ~3` does not round to the nearest multiple of 16. `& ~3` rounds *down* to a multiple of *4*. – Ry- Aug 08 '13 at 00:18
2

yes, 4, not 16, i forgot i finally rounded to 4 pixels, which makes 16 bytes, so 64 bits, the size of data chunks used by Chrome when doing a putImage. Might seem arbitrary but not silly (and anyway easy to change). – GameAlchemist Aug 08 '13 at 00:31

how to create a canvas dynamically in javascript

2 Answers2