Can someone please help me to draw this shape in canvas?
Any help is appreciated!
You can try quadraticCurveTo ( https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes )
Here's an example: http://jsfiddle.net/V9sVY/
To draw any custom shape use this site http://canvimation.github.com/ to directly draw the shape and to export it as a canvas. Viewing the source of the exported page will also show you the canvas script to obtain it.
For the above shape, change the grid settings to grid on and show to make sure you will draw a straight line. Choose the free form shape, click to start a line then double click at the end of the line. Drag the red control points to form the require shape. The control points do not lock to the grid but can help you gauge where to place them.
The following shows one possibility obtained by doing this.
ctx.beginPath();
ctx.moveTo(167,196);
ctx.bezierCurveTo(217,98,418,99,467,196);
ctx.bezierCurveTo(414,296,218,295,167,196);
ctx.closePath();
ctx.stroke();
Related
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/
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?
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 want to draw a line in canvas I want to click on a particular area and then drag to ending area to draw line between starting and ending cordinates I am not sure which event i should be using. I will first click on a particular location in canvas and then drag my mouse to the ending location. To which i need the line to be drawn. Can anybody please suggest.
I am sure you can figure it out having a look here: http://www.webtoolkit.info/javascript-drag-and-drop.html
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/