Canvas shadow properties affect all subsequent paths - javascript

Canvas shadow properties seem to affect all paths that follow it, even when closing the path that contains those properties. I tried changing the order of things. Ok, placing a path that doesnt require a shadow before the one that does works, but that isnt very reliable work-around. Is there any way to fix this?
Here a simple Jsfiddle demonstrating the problem: http://jsfiddle.net/zrt61283/1/
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
// Left
ctx.beginPath();
ctx.arc(100, 75, 20, 0, 2 * Math.PI);
ctx.shadowColor = 'blue';
ctx.shadowBlur = 30;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.stroke();
ctx.fill();
ctx.closePath();
// Right
ctx.beginPath();
ctx.arc(200, 75, 20, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.closePath();

you can reset the shadowBlur property with ctx.shadowBlur = 0; or ctx.shadowBlur = null;
for more info take a look at specs shadowBlur (canvas2dAPI).
here's an alternative way using save() and restore();
fiddle

As others have said doing a reset will work - also you can do .save() which will save the canvas state, you will need to restore as well...
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
// Left
ctx.save();
ctx.beginPath();
ctx.arc(100, 75, 20, 0, 2 * Math.PI);
ctx.shadowColor = 'blue';
ctx.shadowBlur = 30;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.restore();
// Right
ctx.save();
ctx.beginPath();
ctx.arc(200, 75, 20, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.restore();
This will basically save the state of the canvas and allow you to take actions within it, then add new things to the canvas and keep them as different pieces.
here is a quick fiddle of this being used - https://jsfiddle.net/e0qm94dn/

Related

Overlapping clipping issue

I have an issue where I am grabbing a users displayAvatar() and then I use an arc to make the image round. This works fine, however, I need to place a circle on top of that image, but it is getting cut in half because of the previous clip()
Without clip() : https://i.gyazo.com/b474c656f33a1f004f5e3becffcef527.png
With clip() : https://i.gyazo.com/da13377cd3f6dc7516c2b8fd1f0f8ac9.png
I know that in the 'With clip()' image, it appears as if the arc border is showing outside of the clip, but that is hardcoded into the image, I put it as a guide with an image editor.
I tried moving around the code, I removed the line ctx.clip() and saw that my circle displays fine on top of the image.
// circle around avatar
ctx.beginPath();
ctx.arc(122.5, 141.8, 81, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
const avatar = await Canvas.loadImage(
message.author.displayAvatarURL({ format: 'png' })
);
ctx.strokeStyle = '#ffffff';
ctx.strokeRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(avatar, 41.5, 60.5, 162, 162);
// presence circle
ctx.beginPath();
ctx.arc(184.5, 193.5, 19, 0, Math.PI * 2, true);
ctx.strokeStyle = '#000000';
ctx.lineWidth = 8;
ctx.stroke();
ctx.fillStyle = userStatusColor;
ctx.fill();
Take a look at the canvas clip() definition:
https://www.w3schools.com/tags/canvas_clip.asp
Tip: Once a region is clipped, all future drawing will be limited to the clipped region (no access to other regions on the canvas). You can however save the current canvas region using the save() method before using the clip() method, and restore it (with the restore() method) any time in the future.
Below is an example using the save and restore
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(90, 90, 81, 0, Math.PI * 2, true);
ctx.stroke();
ctx.save();
ctx.clip();
ctx.beginPath();
ctx.arc(150, 50, 19, 0, Math.PI * 2, true);
ctx.fillStyle = '#0000ff';
ctx.lineWidth = 8;
ctx.stroke();
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.arc(170, 99, 19, 0, Math.PI * 2, true);
ctx.fillStyle = '#ff0000';
ctx.lineWidth = 8;
ctx.stroke();
ctx.fill();
<canvas id="canvas"></canvas>

how to manage zoom and length handle in papaya

What I want to do is
1) I want to draw a length on image and want to add handle to edit it.
2) When I want to zoom the image the drawn length should match the zoom level.
ctx.beginPath();
ctx.moveTo(linearr[i].x1, linearr[i].y1);
ctx.lineTo(linearr[i].x2, linearr[i].y2);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(linearr[i].x1, linearr[i].y1, 2, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(linearr[i].x2, linearr[i].y2, 2, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
ctx.stroke();
where linearr is an array
Papaya already supports a ruler tool, if that's what you're looking for.
Otherwise, see the function papaya.viewer.Viewer.prototype.drawRuler() for an example of how to use the screen transform to draw lines, which includes the zoom transform. Another function that might be helpful to you is this.selectedSlice.findProximalRulerHandle().

Animating an emoticon to wink with animation in HTML5 canvas

I am attempting to animate an emoticon that was previously drawn in canvas. I am attempting to do a draw and clear using frames following a tutorial but am not getting results. I have 6 frames of the emoticon coded and am unsure how to include this within the code. This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Adding Animation</title>
<style>
canvas {
border: 3px #CCC solid;
}
</style>
</head>
<body>
<div id="container">
<canvas id="myCanvas" height="1200" width="900"></canvas>
</div>
<script>
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
function drawCircle() {
mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
// color in the background
mainContext.fillStyle = "#EEEEEE";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
// draw the circle
ctx.beginPath();
ctx.strokeStyle = "000000";
ctx.lineWidth = 5;
ctx.fillStyle = "yellow";
ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
//The smile
ctx.beginPath();
ctxstrokeStyle = "black";
ctx.lineWidth = 2;
ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
ctx.stroke();
ctx.closePath();
//The eyes
//Left
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(850, 405, 40, 0 * Math.PI, Math.PI * 2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
//Right
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore()
}
drawCircle();
</script>
</body>
</html>
I am unsure if I am even on the right track as I have a difficult time with animation. Does anyone have any suggestions they can give me guidance on?
You have 2 names for the context: mainContext & ctx.
Change it to a single name and your face is "smiley" ! :-)
...
To animate:
Use a requestAnimationFrame loop to change the scaleY value in scale(scaleX,scaleY) over time.
Here's annotated code and a Demo:
var mainCanvas = document.querySelector("#myCanvas");
var ctx = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
ctx.translate(-425,-275);
drawCircle(1);
// global var to hold pct the left eye is open
// 1==fully open, 0==fully closed
var scaley=1;
var direction=-1;
// request 1 animate() loop
requestAnimationFrame(animate);
function animate(time){
// draw smiley with the specified eye openness
drawCircle(scaley);
scaley+=.02*direction;
if(scaley<0){
scaley=0;
direction=1;
}
if(scaley>1){
scaley=1;
direction=-1;
}
requestAnimationFrame(animate);
}
function drawCircle(scaleY) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// color in the background
ctx.fillStyle = "#EEEEEE";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
// draw the circle
ctx.beginPath();
ctx.strokeStyle = "000000";
ctx.lineWidth = 5;
ctx.fillStyle = "yellow";
ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
//The smile
ctx.beginPath();
ctxstrokeStyle = "black";
ctx.lineWidth = 2;
ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
ctx.stroke();
//The eyes
//Left
ctx.save();
// move the [0,0] origin to the left eye's centerpoint
ctx.translate(550,405);
// close the left eye by the specified scaleY
ctx.scale(0.65, scaleY);
ctx.beginPath();
// draw the left eye (arc) at 0,0 because
// we translated the origin to [550,405] earlier
ctx.arc(0, 0, 40, 0 * Math.PI, Math.PI * 2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
//Right
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore()
}
<canvas id="myCanvas" height="1200" width="900"></canvas>
You never declared a ctx variable.
Change all your mainContext by ctx and it should be working fine.

Apply shadow on different drawings in canvas

When I apply the shadow effect to the Sun variable, it automatically applies to the Neptune one as well. I don't want this. Do I give ctx a different name to fix this or does the issue lie somewhere else?
I've been told to keep just one context reference, so I'm terribly confused. I feel I need to shuffle some lines around to be able to give each variable unique properties.
Here's my code for you to see:
function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
var cW = ctx.canvas.width, cH = ctx.canvas.height;
var rectW = 40;
var rectH = 0;
var rectX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5);
var rectY = (ctx.canvas.height * .5) - (rectH * .5);
var Starsystem = {
Neptune: {
x: 180,
y: 300,
render: function(){
Starsystem.Neptune.x = Starsystem.Neptune.x + 0;
Starsystem.Neptune.y = Starsystem.Neptune.y - 0;
ctx.fillStyle = "rgb(65,105,225)";
ctx.beginPath();
ctx.arc( Starsystem.Neptune.x , Starsystem.Neptune.y, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
}, Sun: {
render: function(){
ctx.fillStyle = "rgb(255,255,51)";
ctx.beginPath();
ctx.arc(rectX, rectY, rectW, rectH, Math.PI*2, true); //alligns the sun in center
ctx.closePath();
ctx.fill();
ctx.shadowColor = 'yellow';
ctx.shadowBlur = 50;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
//Still applied to all
}
}
}
I only found 2 issues, and that was that you were setting it globally and you had the shadow AFTER you created the sun. You can move it wherever you'd like, but if you wanted it applied to your "Sun", then it would be best done like this.
The way I've found best to stop that problem is by wrapping my change code in save() and restore() functions. Like this:
}, Sun: {
render: function(){
ctx.fillStyle = "rgb(255,255,51)";
ctx.save(); //store ctx so it can be later reused.
ctx.shadowColor = 'yellow';
ctx.shadowBlur = 50;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.beginPath();
ctx.arc(rectX, rectY, rectW, rectH, Math.PI*2, true); //alligns the sun in center
ctx.closePath();
ctx.fill();
ctx.restore(); //ctx at time of save.
Working Fiddle: https://jsfiddle.net/gregborbonus/g1d6jkh7/
Keep one context, yes, but you have to bear in mind that any properties you set on the drawing context, will be remembered for future draw operations. There's a couple of ways round this.
a) ensure that you always set the desired properties prior to any draw operations. Especially ones that may have been overwritten by another object's draw operations.
b) Use context.save() and context.restore(). You can save the state of the context, make changes, do your draw operations and then restore back to its previous state, ready for the next draw operation, ensuring that you have not messed about with any other draw properties for other objects.
http://www.tutorialspoint.com/html5/canvas_states.htm
You need to set the shadow properties before using the fill() method.
ctx.shadowColor = 'yellow';
ctx.shadowBlur = 50;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.fill();

Understanding HTML5 Canvas Element

I am read tons of documentation about save/restore canvas states, but still confused with next example.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// save default state
ctx.save();
// draw new arc with new settings
ctx.lineWidth = 2;
ctx.fillStyle = '#bfb';
ctx.strokeStyle = '#999';
ctx.beginPath();
ctx.arc(50, 50, 10, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
// restore default state
ctx.restore();
// save default state again
ctx.save();
// draw line with new settings
ctx.lineWidth = 4;
ctx.strokeStyle = '#000';
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
// restore default state
ctx.restore();
// save default state third time
ctx.save();
// draw round circle with new settings
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#999';
ctx.arc(100, 100, 10, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = '#bfb';
ctx.fill();
ctx.stroke();
// restore default state
ctx.restore();
}
draw();
My logic in code comments, but result absolutely not expected. First circle has a settings from line. Circles should have different style from line.
I am not good at canvas just yet but with some basic learning I think
You are missing ctx.beginPath(); before starting to draw path.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// save default state
ctx.save();
// draw new arc with new settings
ctx.lineWidth = 2;
ctx.fillStyle = '#bfb';
ctx.strokeStyle = '#999';
ctx.beginPath();
ctx.arc(50, 50, 10, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
// restore default state
ctx.restore();
// save default state again
ctx.save();
// draw line with new settings
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = '#000';
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
// restore default state
ctx.restore();
// save default state third time
ctx.save();
// draw round circle with new settings
ctx.beginPath(); /* ** THIS is missing in your code ** */
ctx.lineWidth = 2;
ctx.strokeStyle = '#999';
ctx.arc(100, 100, 10, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = '#bfb';
ctx.fill();
ctx.stroke();
// restore default state
ctx.restore();
}
draw();
DEMO
SOURCE

Categories