is there any way to create the shape using 'bezier Curve' or 'quadratic curve' in html5 canvas . or is there any method to draw a polygon in canvas
For a polygon you can use the following(where ctx is your canvas's getContext('2d')):
ctx.fillStyle=*hex code of the color you want it to be";
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
*add more points if needed using a lineTo(x,y) for each of your points*
ctx.closePath();
ctx.fill();
If you want a stroke polygon use ctx.strokeStyle and ctx.stroke() instead of ctx.fillStyle and ctx.fill()
Sure you can, you have at least:
quadraticCurveTo
bezierCurveTo
Have a look to this sample code:
http://www.html5canvastutorials.com/labs/html5-canvas-playing-card-suits/
Related
I am creating a gaming application . I have to constantly update the background usig
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, width, height);
But I want to have moving film in background like landscapes mountains , roads , trees passing by ) . How Should I achieve this ?
I suggest you have a video running in the background layer ( refer to video element of html5) and then use the destination-out and source-over property in your canvas . Find code below
// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0,W,H);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';
This way your background will be running independent of the game . Ofcourse you can pause and resume it using eventlistners etc in javascript
I am using html5 canvas and drawing rectangles on the canvas with the following code,
function drawRectangle(mouseX,mouseY)
{
ctx.beginPath();
ctx.rect(25,25,100,100);
ctx.fill();
ctx.stroke();
}
I am getting rectangle on the canvas,but the problem is
Within that rectangle multiple lines is coming as the border.I dont want those lines.
Please suggest me.
Why dont you just use fillRect?
function drawRectangle(mouseX,mouseY)
{
ctx.beginPath();
ctx.fillRect(25,25,100,100);
}
I have this weird issue where setting up multiple clip rectangles in HTML5 causes the drawing to bleed/overlap into the previous clip boxes, even when each one is contained in a ctx.save() - ctx.restore().
Here is the code example:
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// 1st clip
ctx.save();
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.clip();
// draw red rectangle after 1st clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,300,140);
ctx.restore();
// 2nd clip
ctx.save();
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();
// draw blue rectangle after 2nd clip
ctx.fillStyle="blue";
ctx.fillRect(0,0,300,140);
ctx.restore();
And a jsfiddle:
http://jsfiddle.net/4eXw9/1/
Is there a way to stop a clip call from bleeding/overlapping previous clips?
You are missing a beginPath() on the second clip:
// 2nd clip
ctx.save();
ctx.beginPath()
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();
Modified fiddle
What happens is that your new rect is merged with the first one since stroking/filling does not clear the path - so both are stroked/filled again. To clear the path you must explicitly clear it using beginPath(). As the path also is the basis for clip()..
Hi i am building a windows store app with html5 and javascript in my app i am trying to implement an eraser tool but this is problematic because if the user moves an image or another layer to where they've previously erased, they see the white drawing where they erased.
i have been trying to do the eraser tool from different ways for example i have changed the default globalCompositeOperation to "destination-out" like this code
//Here is the error.
if (clickTool[j] == "eraser") {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(255,0,0,0.5);';
ctx.strokeStyle = 'rgba(255,0,0,0.5);';
}
else {
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = clickColor[j];
}
but unfortunately it doesn´t work for me. i have uploaded all my code to this link:
My code
Please i would like to somebody could help me.
Thanks and i'm sorry for my speech , i'm mexican.
Use multiple layers. Have one canvas for the background image and another for the drawing; that why you never erase any of the background image.
If you need to, you can have multiple layers as they don't generally impact performance.
And of course if you can combine layers, say the last drawn squiggle to the background layer, if you deem a drawing to be "permanent".
Maintain a array of mid points. Use the globalCompositeOperation as 'destination-out' first and 'source-over' later to make a transparent eraser trail .
Following is the code that you need to use with a mouse move function
var handleMouseMove = function (event) {
midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
if(curTool.type=="eraser"){
var tempcanvas = document.getElementById('drawcanvas');
var tempctx=tempcanvas.getContext("2d");
tempctx.beginPath();
tempctx.globalCompositeOperation = "destination-out";
tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);
tempctx.fill();
tempctx.closePath();
tempctx.globalCompositeOperation = "source-over";
drawingCanvas.graphics.clear();
// keep updating the array for points
arrMidPtx.push(midPt.x);
arrMidPty.push(midPt.y);
stage.addChild(drawingCanvas);
stage.update();
}
};
I use this code to make a eraser that behaves like pen and fills up transparent color instead of white
Wondering why the scale parameter of the variable ´ell´ is applying to the next two circles I have created as well:
var ell=canvas.getContext("2d")
ell.beginPath()
ell.lineWidth=2
ell.fillStyle="#FFFFFF"
ell.strokeStyle="#000000"
ell.scale(1.2,0.5)
ell.arc(125,190,30,0,2*Math.PI,false)
ell.fill()
ell.stroke()
var circ=canvas.getContext("2d")
circ.beginPath()
circ.lineWidth=1
circ.fillStyle="#FFFFFF"
circ.strokeStyle="#000000"
circ.arc(150,95,15,0,2*Math.PI,false)
circ.fill()
circ.stroke()
var circ2=canvas.getContext("2d")
circ2.beginPath()
circ2.fillStyle="#1d1d1d"
circ2.arc(155,90,4,0,2*Math.PI,false)
circ2.fill()
It's supposed to be an eyeball, the first shape is an oval and the next two are supposed to be circles, however they are getting squished by the scale command, and their positions are thrown off as well.
Any help appreciated, thanks!!
You could either use setTransform and reset the scale manualy or
call save() before applying the scale and call restore() when your done with it.
var ctx=canvas.getContext("2d")
ctx.save(); // save the context state
ctx.beginPath();
ctx.lineWidth=2;
ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#000000";
ctx.scale(1.2,0.5);
ctx.arc(125,190,30,0,2*Math.PI,false);
ctx.fill();
ctx.stroke();
ctx.restore(); // restore the state to the last save()
// you can reuse the same context
ctx.save();
ctx.beginPath();
draw the second circle...
take a look at
https://developer.mozilla.org/en/Canvas_tutorial/Transformations