0

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;
Improve this question
5
  • is this not sufficient? stackoverflow.com/a/2142549/1180785 Commented Aug 8, 2013 at 0:05
  • 1
    looking at your code: you implemented your own line rasteriser? Use the built-in functionality! html5canvastutorials.com/tutorials/html5-canvas-lines (your code lags behind the mouse) Commented Aug 8, 2013 at 0: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.. Commented Aug 8, 2013 at 0: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. Commented Aug 8, 2013 at 0:14
  • Dave : yes for speed, but in the same time the 8-bit look of an non-antialiased line is nice... Commented Aug 8, 2013 at 0:49

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

newCanvas has to be generated with button onclick. how to do that?
@regeme: Don’t. Use fillRect.
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: 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?
because each new canvas has to generate the different drawings.. Is your code work for that cause I couldnt implement it
|
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;
}
Improve this answer

4 Comments

& (~3)? What? This is silly. And so is creating a <body>. And so is a semicolon after a block.
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.
& ~3 does not round to the nearest multiple of 16. & ~3 rounds down to a multiple of 4.
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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.