I need is some way to draw a shape in html. I've tried searching around, but I haven't found anything related.
Here is a sketch of what I need.
I need to draw shape in red. I know how to draw the dots, but I don't know how to connect them, because the red dots can move. The blue dots mark where the red dots can go.
You could use a canvas. Here’s how you could draw a triangle:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
<canvas id="canvas" width="150" height="150">Your browser lacks canvas support.</canvas>
I’ll leave it to you to figure out how to draw a diamond and make it red.
Related
I have used fillstyle in javascript and i want multiple color snowballs in it, how can i use it? I have tried using multiple functions and also multiple canvas but not able to do it, please help
Hard to tell without code but I will guess that you are not using ctx.beginPath() each time you want to draw a different colour.
var ctx = can.getContext("2d");
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(Math.random()*100+10,Math.random()*100+10,10,0,Math.PI*2);
ctx.fill();
ctx.fillStyle = "green";
ctx.beginPath(); // start a new path
ctx.arc(Math.random()*100+10,Math.random()*100+10,10,0,Math.PI*2);
ctx.fill();
ctx.fillStyle = "blue";
ctx.beginPath(); // start a new path
ctx.arc(Math.random()*100+10,Math.random()*100+10,10,0,Math.PI*2);
ctx.fill();
<canvas id="can"></canvas>
I am taking an HTML5 Tutorial that is pretty awesome. I got to the radial gradient section of the canvas section of the video, which is about 59 min 44 sec in. I am having an issue that I can't identify where when I change the color of a gradient in the radial gradient, it adds a fill to the triangle. click here for a screenshot of the output.
The code for the canvas is on a JS file, and here is the function snippet with the triangle and radial gradient:
function init(){
var canvas = document.getElementById("canvas");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// rectangles
ctx.fillStyle = "#FAEBD7";
ctx.fillRect(0,0,canvas.width,canvas.height);
// triangle
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.moveTo(350,200);
ctx.lineTo(400,50);
ctx.lineTo(450,200);
ctx.closePath();
ctx.fill();
// add stroke to triangle
ctx.strokeStyle = "green";
ctx.beginPath();
ctx.moveTo(350,200);
ctx.lineTo(400,50);
ctx.lineTo(450,200);
ctx.closePath();
ctx.stroke();
// radial gradient
var radGrad = ctx.createRadialGradient(275,250,5,290,260,100);
radGrad.addColorStop(0,"red");
radGrad.addColorStop(1,"pink");
ctx.fillStyle=radGrad;
ctx.arc(250,200,25,0,Math.PI*2,true);
ctx.fill();
}
}
onload = init;
When I removed the radial gradient, the triangle goes back to what it was originally. here is a screenshot or the correct looking triangle.
I tried messing with the parameters of var radGrad = ctx.createRadialGradient(275,250,5,290,260,100), looking for perhaps matching numbers and changing them, seeking conflicts with the radial gradient and the triangle, but have no success.
Thank you!
Please help me so I can have the radial gradient on the page and the correct looking triangle.
I took a look at he triangle and the arc and the difference was the ctx.beginPath(); and ctx.closePath();, and it stopped my second radGrad.addColorStop(1,"pink") or whatever color I added from changing the color of the triangle. You can see the new code below and a screenshot here.
var radGrad = ctx.createRadialGradient(275,250,5,290,260,100);
radGrad.addColorStop(0,"red");
radGrad.addColorStop(1,"pink");
ctx.fillStyle=radGrad;
ctx.beginPath();
ctx.arc(250,200,25,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
I'm wondering if the following code yields appropriate behavior. I feel like the top left square should still be green. that is, if I clip one area, ten restore, then paint in a second area, the canvas paints in BOTH areas. Why?
https://jsfiddle.net/s6t8k3w3/
var my_canvas = document.getElementById('canvas');
var ctx = my_canvas.getContext("2d");
//Make Clipping Path 1
ctx.save();
ctx.rect(20, 20, 100, 100);
ctx.clip();
//Fill Background with Green
ctx.fillStyle = 'rgba(0,255,0,1)';
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height);
//Close Clipping Path 1
ctx.restore();
//Open Clipping Path 2
ctx.save();
ctx.rect(50, 50, 100, 100);
ctx.clip();
//Fill background with Blue
ctx.fillStyle = 'rgba(0,0,255,1)';
ctx.fillRect(0, 0, my_canvas.width, my_canvas.height);
//Draw Line
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 500);
ctx.stroke();
//CloseClipping Path 2
ctx.restore();
You're not actually opening a second clipping path with that second ctx.save(); to do that, you need to call ctx.beginPath()
I want to draw a line with one color, and the next line with a different color. But when I call stroke() the second time, the first line is draw again! How can I avoid it? Here's my code:
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.strokeStyle = "#FF0000";
ctx.stroke();
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.strokeStyle = "#999999";
ctx.stroke();
Thanks in advance!
Just insert a beginPath() in there:
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.strokeStyle = "#FF0000";
ctx.stroke();
cxt.beginPath(); // <---
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.strokeStyle = "#999999";
ctx.stroke();
That will reset your path. A stroke just strokes what exists on the path but does not clear it. You will have to manually reset the path for each new shape you want to draw.
The advantage is that you can reuse the path for fill, clip and point testing. The disadvantage is that it's easy to forget sometimes.
Goal per subject.
code snip:
var canvas= document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');
canvas.width= 520;
canvas.height= 405;
ctx.font = "15pt Verdana";
ctx.lineWidth = 1;
// text 1
ctx.fillText("me and my dog puddie", 210, 90);
// text 2
ctx.fillText("you and many many crazy nuts", 210, 130);
// draw a quadratic bezier curved line between the these 2 text blocks
ctx.strokeStyle = "rgb(65,60,50)";
ctx.beginPath();
ctx.moveTo(210,100);
ctx.bezierCurve(230,250,130,160,160,100);
ctx.stroke();
/* outcome:
no line were drawn between these two text objects
*/
I have a very limited understanding of a quadratic curved line
Change the line
ctx.bezierCurve(230,250,130,160,160,100);
to
ctx.bezierCurveTo(230,250,130,160,160,100);
and you should be good to go.
You should use quadraticCurveTo for quadratic curves, bezierCurveTo is for cubic curves.
ctx.beginPath();
ctx.moveTo(210,100); // move to the start
ctx.quadraticCurveTo(230, 130, 160, 100); // draw quadractic curve
ctx.stroke();
See Bezier and quadratic curves in the Canvas Tutorial.