so what I want to achieve is drawing a rectangle with either a color/fillRect or with clearRect and then copy it to the other canvas layer under the one I was drawing on. Also I want to set a background to this layer with opacity.
What I've tried is setting background with fillStyle and fillRect and it went fine. Also I could draw the rectangle with fillRect on the upper canvas which had no background and then copy the rectangle to the other one with drawImage.
Problem was when I tried to create a rectangle with clearRect and copy it. As I noticed I can only clearRect with another rectangle. But then I have to set a background to the upper canvas, which is ok, but when I copy it to the other one it gets darker and darker every time (well of course..)
So how is this possible?
When you work with alpha channel you will as you already noticed accumulate alpha channel values as long as alpha < 255. The only way to "reset" this is to start fresh so-to-speak.
Here are a couple of options to get around this -
Option 1
Don't copy anything from the draft canvas to the main canvas but store all points and shapes into a 2-dimensional array or an array consisting of the shape objects with its points, color, line width and so forth.
When you need to update the main canvas, clear both canvases and then re-render all the shapes to the main one.
Option 2
If all shapes on the main canvas is suppose to have the same opacity then use a third off-screen canvas. Draw everything to this canvas non-transparent (this last is important).
When updating main canvas clear it, set globalAlpha on it and then draw the off-screen canvas to it.
So we'll probably need some example code, because I'm not 100% sure what your trying to do... your using 2 canvas objects, drawing on the top canvas, and copying that to the bottom canvas... something like?:
ctx2.drawImage(canvas1,0,0);
then your clearing the top canvas:
ctx1.clearRect(0,0,canvas1.width,canvas1.height);
and doing your draw routine again? are you trying to get some sort of trail effect or something?
Related
I have a field made up of BitmapData, which I use for pixel-precise hit detection.
However, BitmapData naturally stores 2^32 (or 2^24 with no alpha?) possibilities for each pixel. I only need 2 - black or white.
But I still need to use .draw to make other objects being drawn onto that BitmapData. It doesn't need to be visible.
Extracting a pixel for hit-detection does not seem too difficult - but drawing without cycling through each pixel seems hard. Is it possible?
What would the right approach for this problem be?
If you depend on having your bitmap data to be black or white only, you can employ BitmapData.threshold() after drawing a new mask over that bitmap. To turn your existing BitmapData to black and white with a threshold of half red channel do the following:
bd.threshold(bd,bd.rect,new Point(),"<",0x00800000,0x0,0x00ff0000,true);
bd.threshold(bd,bd.rect,new Point(),">=",0x00800000,0x00ffffff,0x00ff0000,true);
The first call with turn all points that have red below 0x80 black, the second will turn all the remaining points white. Change the mask and threshold value to use green or blue channels if you want. Consider applying a properly channeled ColorTransform object to your draw calls to make the mask correctly applied to a newly drawn object.
I'm writing a painting application with canvas in HTML5.
I've finished my pencil painting with touching and drawing.
And now i'm trying to make a rectangle. For all the topic i've read, i will have to store all of my finished shape in an array, but if i do that, i will also have to store all the point with normal drawing so that i could draw a rectangle like windows painting.
Please give me another solution to draw rectangle like windows, which old rectangle will be dissappeared and new one will replace before i make a "mouse up".
thanks in advance :)
You will either need to save the previous drawings or use 2 canvases.
If you want to save the previous drawings...
In mousedown:
Save the mouse position (startX/startY).
Set a flag indicating that a drag has started (isDown=true)
In mousemove:
if isDown==false, don't do anything (return)
otherwise, clear the canvas
redraw all your previous drawings (from your saved points array, etc)
draw the current rect from the start to mouse position -- context.strokeRect(startX,startY,mouseX-startX,mouseY-startY)
In mouseup:
clear the drag flag (isDown=false)
If you want to use 2 canvases...
As an alternative to storing every previous drawing, you can use 2 canvases. One canvas is used to draw the current rectangle and a second canvas to keep all the previously draw items Here's an example using 2 canvases so you don't have to store previous drawings: jsfiddle.net/m1erickson/V9J5J/
does anybody know/have some idea how to make a mask follow a line? Basically I have a drawing made with 1px line and I need to gradually mask this shape so it actually looks like it is being drawn. The thing is that I cannot just increase the width of the mask (it would simple draw a vertical line in one step which is not desired), it has to be a linear movement along the "guide" line, so the vertical line gets drawn in several steps. Doing this manually will/would be a major pain. This is what I am trying to achieve:
Thanks a lot!
You have to do it manually. Though there are some shortcuts you can take:
Create a Guide layer in Flash Pro.
Copy a vector of your path to this guide layer.
Create a new layer below it, put a circle on that layer at the start of the path and make a classic tween of that circle.
Dock your circle layer under your guide layer and at the last frame of your tween move the circle to the end of the path. This will make the circle go along the path.
Follow the animation and manually fill the covered parts.
Put your guide, circle animation and following animation into a MovieClip and put it above your to be masked symbol and make its layer a mask.
Here's an example I made for you if I wasn't clear enough: http://db.tt/kvaaYaLA
Note that this method is only useful if you need a static animation, not for a dynamic one.
I'm trying to program a paint application using Canvas.
the way it works is by connection lines when the mouse is pressed.
when the line is opaque it works well, but when I change the alpha parameter I get a problem.
I tried two options:
a. The path begins when the mouse is down for the first time and ends when the mouse is up again:
every move of the mouse calls the stroke() function. because the line is transparent the beginning of the whole path will become opaque and the end won't, because stroke() is called many times, and it drwas the whole path again and again.
b. The path begins and ends every move of the mouse:
the line is transparent through the whole way, but the matching point between every path and path are less transparent (because they're made of two lines). so the whole path is not solid.
the only way I get a good result is when I call stroke() only when the mouse is up again. then it strokes the whole path well, but I see nothing while actually drawing it.
what can I do?
thanks
I think your best bet is to create a second overlay canvas that is positioned (using absolute positioning) over your primary canvas.
During a mouse drag, for every mousemove event use a clearRect() to clear your overlay canvas and then draw the entire stroke-in-progress.
When you get a mouseup, clear the overlay and draw the entire stroke to the primary canvas.
Here's a live example:
http://jsfiddle.net/rnNFB/1/
I tried to draw on the image using canvas. Yes, of-course i did. But i need to merge the canvas drawing with the image instantly.
i.e My concept is, i have one image (#a) and i like to mark some places on the image (circle, rectangle, etc...), so i have just pick the canvas technique. (if any other technique is available please suggest me.)
So, after the canvas drawing, i want to merge the canvas image with my actual image (#a). Then, i'll get the marked image.
What i did before?.
I was set the background as my actual image(#a) to the canvas tag. (i.e canvas tag with some background image). I have done the drawing. Then, i have convert the canvas image as dataURI, then i will merge the actual image (#a) with canvas drawing using Linux command (imageMagic).
Can you tell me any other way, to draw directly on the image and save the drawing with image instantly.?
Thanks in advance.
Don't set the background of the canvas.
Instead, you want to use the drawImage() function of the canvas context to literally paint the image onto the canvas. Then do all your drawing operations.
Then you can save the image correctly. I'd also suggest looking in to Canvas2Image for that.
http://www.nihilogic.dk/labs/canvas2image/