I am drawing some shapes on a canvas element. The first element is a path, which should not get filled at all. I know I can set fillStyle to none, but it gets filled twice.
Here is some example code (also on jsfiddle):
can = document.getElementById('can');
ctx = can.getContext('2d');
function drawPoint(x,y){
ctx.arc(x,y,12,0,Math.PI*2,false);
ctx.fillStyle ='rgba(255, 0, 0, 0.2)';
ctx.fill();
}
function shape(){
ctx.fillStyle = 'rgba(0,255,0,0.2)';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(100,30);
ctx.lineTo(30,200)
ctx.closePath();
ctx.stroke();
ctx.fill();
}
shape();
drawPoint(30,12);
This is just an example code, to illustrate the problem I am facing.
When I draw the shape afterwards, the point is in the background. So this won't work. I also searched for resources on how the fill method works but couldn't find anything useful.
So how can I draw the shape without filling it?
Just don't call fill()...
For example, if you want your method reusable you can use a flag:
function shape(fill){
fill = fill || false;
ctx.fillStyle = 'rgba(0,255,0,0.2)';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(100,30);
ctx.lineTo(30,200)
ctx.closePath();
ctx.stroke();
if (fill) ctx.fill();
}
Now you can call:
draw(); /// won't fill
draw(true); /// fills
Also add a beginPath() to this method or else it will just add to the path of the first shape (which perhaps is what you mean?):
function drawPoint(x,y){
ctx.beginPath();
ctx.arc(x,y,12,0,Math.PI*2,false);
ctx.fillStyle ='rgba(255, 0, 0, 0.2)';
ctx.fill();
}
Hope this helps (and that I didn't misunderstand your question)!
Modified fiddle here
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 just getting started with Canvas programming and trying to build a small game. Below is a sample code that I am trying out. My intention is to:
Create a canvas.
Fill it with some background color.
Draw a circle.
Clear the canvas.
Draw another circle in different location.
Here's the code:
var canvas = document.createElement('canvas');
canvas.width= 400;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
// 2. Fill background
ctx.fillStyle = 'rgb(30,0,0)';
ctx.fillRect(0,0,400,400);
// 3. Draw circle
ctx.save();
ctx.fillStyle = 'rgba(256,30,30,.8)';
ctx.arc(50,50, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();
// 4. Clear Canvas
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
// 5. Draw another circle
ctx.save();
ctx.fillStyle = 'rgba(256,30,30,.8)';
ctx.arc(150,150, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();
But as you can see, only the background color gets cleared and the first circle remains as it is.
Why is the above code fails to clear the canvas completely before drawing second circle?
If you don't use beginPath before starting a new path, all draw command keeps stacking in the current path.
What's happening here is that when you fill() the second time, the first circle is still in the current path, so even if the screen was in deed cleared, there are two circles drawn with this single fill() command.
==>> use beginPath() before starting a new path.
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.
I'm trying to make a website where an image is drawn on Canvas, then later the user is able to press a button to ctx.fill() certain parts of it with color. I'm running into issues where I can only ctx.fill() the most recently created shape which often isn't the shape I want.
Here's an example. In this code (live at http://build.rivingtondesignhouse.com/piol/test/) I'm trying to draw the first rectangle, then save() it on the stack, then draw the second rectangle (and don't save it), then when my fill() function is called I want to restore() the first rectangle and ctx.fill() it with a different pattern. It doesn't work!
In practice, I'm actually trying to fill the gray part of this complex shape with any color the user chooses AFTER the image has been drawn, but I think the technique is the same. (http://build.rivingtondesignhouse.com/piol/test/justTop.html)
Thanks in advance for any help!!!
Here's the code:
<script type="text/javascript">
var canvas;
var ctx;
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
draw();
}
function draw() {
ctx.fillStyle = '#FA6900';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(0,0,15,150);
ctx.save();
ctx.fillStyle = '#E0E4CD';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
ctx.fillRect(30,0,30,150);
}
function fill(){
var image = new Image();
image.src = "http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
image.onload = drawPattern;
function drawPattern() {
ctx.restore();
ctx.fillStyle = ctx.createPattern(image, "repeat");
ctx.fill();
}
}
init();
There are a few misunderstands that we need to clear up before I can answer the question.
save() and restore() do not save and restore the canvas bitmap. Instead they save and restore all properties that are set on the canvas context and that's all!
For example
ctx.fillStyle = 'red';
ctx.save(); // save the fact that the fillstyle is red
ctx.fillStyle = 'blue'; // change the fillstyle
ctx.fillRect(0,0,5,5); // draws a blue rectangle
ctx.restore(); // restores the old context state, so the fillStyle is back to red
ctx.fillRect(10,0,5,5); // draws a red rectangle // draws a red rectangle
See that code live here.
So you aren't saving a rectangle (or anything drawn) by calling save(). The only way you you can save the bitmap is by drawing it (or part of it) to another canvas (using anotherCanvasContext.drawImage(canvasIWantToSave, 0, 0)) or by saving enough information that you can redraw the entire scene with the appropriate changes.
Here is an example of one way you could re-structure your code so that it does what you want: http://jsfiddle.net/xwqXb/
I am trying to change the color of line drawn on canvas dynamically...
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey"
It could be mouseover event or press botton or mouse click event, I want to change the color of line or make it bold. Is it possible to change the color by adding event or is it possible to give style on an event on particular element?
Very close. In a sense, you can't really "change" the color of an element on the canvas because it has no scene graph, or, in other words, it has no history of what has been drawn on the canvas. To change the color of a line, you would have to redraw the line.
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Grey";
ctx.stroke();
// To make the line bold and red
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.strokeStyle = "Red";
ctx.lineWidth = 5;
ctx.stroke();
If the canvas had a more complex scene going on, you would have to redraw the entire scene. There are numerous Javascript libraries that extend the base features of the canvas tag, and provide other drawing capabilities. You may want to take a look at Processing, it looks quite impressive.
I was having the same problem, I did it by moving another line with another color of different canvas element, so it gives appearance of line changing its color dynamically.
function drawGreyLine() {
ctx1.clearRect(0, 0, WIDTH, HEIGHT);
ctx1.strokeStyle = "Grey"; // line color
ctx1.moveTo(0, 0);
ctx1.moveTo(0, 200);
ctx1.lineTo(200, 200);
}
function drawColorLine() {
x += dx;
if (x <= 200) {
ctx2.beginPath();
ctx2.lineWidth = 5;
ctx2.lineCap = "round";
ctx2.strokeStyle = "sienna"; // line color
ctx2.moveTo(0, 200);
ctx2.lineTo(x, 200);
ctx2.moveTo(200, 200);
ctx2.stroke();
}
}
Hope this solves your problem.... :)
var canvas = document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var line1={x:10,y:10, l:40, h:1}
var down=false;
var mouse={x:0,y:0}
canvas.onmousemove=function(e){ mouse={x:e.pageX-this.offsetLeft,y:e.pageY-this.offsetTop};
this.onmousedown=function(){down=true};
this.onmouseup=function(){down=false} ;
}
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.beginPath()
ctx.moveTo(line1.x,line1.y)
ctx.lineTo(line1.x +line1.l,line1.y)
ctx.lineTo(line1.x +line1.l,line1.y+line1.h)
ctx.lineTo(line1.x,line1.y+line1.h)
ctx.isPointInPath(mouse.x,mouse.y)? (ctx.fillStyle ="red",line1.x=down?mouse.x:line1.x,line1.y=down?mouse.y:line1.y):(ctx.fillStyle ="blue")
ctx.fill()
},100)