I'm trying to make a circle around another circle except that each turn the circles are not recreated in the same place so it doesn't work.
function init(){
ctx.globaleCompositeOperation = 'destination-over';
ctx.clearRect(0,0,innerWidth,innerHeight);
ctx.translate(800,400);
[enter image description here][1]
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(0,0,110,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
ctx.rotate(0.1*Math.PI/180);
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
requestAnimationFrame(init);
}
init();
this is what it gives:
when i want that :
It works for me if I do two things.
Mend the typo which has an extra e in globaleCompositeOperation
And I sort of guess at what you have set innerWidth and innerHeight to. Are these set somewhere?
If you could put up a snippet with everything in it to make it work that might help. I can’t make a snippet as I am on a touch only device I’m afraid.
Here’s my code
<canvas id='c'></canvas>
<script>
function init(){
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,1024,768);
ctx.translate(0,0);
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(0,0,110,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
ctx.rotate(0.1*Math.PI/180);
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
requestAnimationFrame(init);
}
let c= document.getElementById('c');
let ctx = c.getContext('2d');
init();
</script>
Related
Hi I want to understand the essentials of opening and closing function of canvas .
What I noticed was when I used only one opening and closing of function of canvas for 2 separate object a rectangle and a semi circle. The colour started leaking as shown:
What I expect is as below figure 2. With one opening and closing canvas function:
The code is mentioned below
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(30, 30, 50, 60);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(350,200,20,0,Math.PI*2,false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
The function ctx.beginPath create a new path object by deleting all existing paths points and strokes
The function ctx.closePath creates a line from the last point added to the current path to the previous ctx.moveTo or ctx.beginPath it is unrelated to the ctx.beginPath function and does nothing if followed by ctx.beginPath
The function ctx.closePath is the same as ctx.lineTo in the following
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100); // back to start
Same as
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.closePath(); // does the same as ctx.lineTo(100,100); // back to start
Some comments in your code.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(30, 30, 50, 60);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath(); // <<< Not needed as you have already called fill
ctx.beginPath(); // <<< this deletes the previous path
ctx.arc(350,200,20,0,Math.PI*2,false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath(); // <<< not needed
I want to have one shadow for a large number of dots that over lap with different strokeStyles. I don't want to see the shadow on top of the other dots. So is there a way to have different strokeStyles for one path, or is there a way to apply one shadow to multiple paths?
JSFiddle
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowColor = "black";
ctx.shadowBlur = 10;
ctx.lineWidth = 30;
ctx.lineCap = 'round';
//This is how I want the shadow to appear
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 50);
ctx.moveTo(70, 50);
ctx.lineTo(70, 50);
ctx.strokeStyle = 'red';
ctx.stroke();
//But I want to have different strokeStyle.
//And I don't want the shadow on top the other dot
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(50, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(70, 100);
ctx.lineTo(70, 100);
ctx.strokeStyle = 'white';
ctx.stroke();
<canvas id="canvas" width="150" height="150"></canvas>
Hey guys i have the below design to create
Now i usually use a image in such a situation ,but was just wondering if this was possible in any other way I.E. maybe canvas ? I have just started learning canvas , so i can't say for certain.
FIDDLE HERE
HTML:
<div class='bnr'></div>
<div class='main'></div>
CSS:
.bnr {
height: 35vh;
background: #990853;
}
.main {
background: #fff;
height: 80vh;
}
Now how do i add those curved lines apart from using an image ?
Thank you.
<body onload="draw();">
<canvas id="canvas" width="985px" height="300px" ></canvas>
</body>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(985,10);
ctx.lineTo(985,245);
ctx.quadraticCurveTo(965,270,965,280);
ctx.quadraticCurveTo(920,130,640,150);
ctx.quadraticCurveTo(530,160,350,190);
ctx.quadraticCurveTo(210,220,10,190);
ctx.lineTo(10,10);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "green";
ctx.fill();
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(985,10);
ctx.lineTo(985,220);
ctx.quadraticCurveTo(965,230,955,255);
ctx.quadraticCurveTo(920,130,640,135);
ctx.quadraticCurveTo(510,140,350,170);
ctx.quadraticCurveTo(190,200,10,160);
ctx.lineTo(10,10);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "#990853";
ctx.fill();
ctx.beginPath();
ctx.arc(805, 150, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "#FFF";
ctx.fill();
ctx.beginPath();
ctx.arc(805, 150, 45, 0, 2 * Math.PI);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "#ce758b";
ctx.fill();
}
}
</script>
That how it looks with the previous code :
You can use canvas for obtain exaclty what you want. Use fill for background color and curve.
You can learn more about canvas:
canvas : http://www.w3schools.com/html/html5_canvas.asp
curve : http://www.w3schools.com/tags/canvas_beziercurveto.asp and http://www.w3schools.com/tags/canvas_quadraticcurveto.asp
fill : http://www.w3schools.com/tags/canvas_fill.asp
a lot of tutorial : http://www.html5canvastutorials.com/
Try my demo:
https://jsfiddle.net/pjxgLkm7/2/
Or
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.bezierCurveTo(0,50,20,50,200,0);
ctx.fillStyle = "#990853";
ctx.fill();
ctx.strokeStyle = '#990853';
ctx.stroke();
<canvas id="myCanvas" style="width:100%"></canvas>
I've got this problem where I add a lineWidth to one canvas-object and then all canvas-objects in the same canvas gets the same lineWidth. For example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.lineWidth = 10;
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
How do I make the lineWidth only apply to one object?
Change the lineWidth line to be:
var defaultLineWidth = ctx.lineWidth;
ctx.lineWidth = 10;
Then in the second drawing action, add this:
ctx.lineWidth = defaultLineWidth;
It's state based. You have to reset lineWidth later on to the value you want for the next path.
Live Demo
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.lineWidth = 10;
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();
ctx.lineWidth = 3; //this
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
ctx.closePath();
I would try to set
ctx.lineWidth = 0;
before calling ctx.stroke() again.
I have to draw a stroked fill on canvas. For this I call ctx.fill and ctx.stroke separately. Due to this, the shadow of the stroke draws on top of the fill which I want to avoid.
Could somebody please tell if there is a way to avoid this?
Here is my code:
ctx1.fillStyle = "blue";
ctx1.strokeStyle = "black";
ctx1.shadowColor = "rgba(0,255,0, 1)";
ctx1.shadowOffsetX = 50;
ctx1.shadowOffsetY = 50;
ctx1.lineWidth = "20";
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx1.fill();
ctx1.stroke();
http://jsfiddle.net/abWYZ/3/
Every time you perform a draw action on the context the shadow is also drawn. The way canvas works is every thing that's drawn is placed on top of what was previously there. So whats happening is the fill is performed, making a shadow of it, and then the stroke is drawn, which makes a shadow on top of all previous drawn objects.
Here is one possible solution.
Live Demo
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = "blue";
ctx.strokeStyle = "black";
ctx.lineWidth="20";
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.shadowColor = "rgba(0,255,0, 1)";
ctx.shadowOffsetX = 50;
ctx.shadowOffsetY = 50;
ctx.stroke();
ctx.fill();
// clear the shadow
ctx.shadowColor = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
// restroke w/o the shadow
ctx.stroke();
If you use an approach like this I suggest making a function called toggleShadow or something along those lines allowing you to control when the shadows are drawn.