CODEWITHSUNDEEP
javascripthtmlcanvas
thomastodon
thomastodon

Reputation: 350

html canvas shadow/blur won't go away

There is a shadow on the bottom and right sides of a rectangle I've drawn in the canvas on the upper-left hand corner of my window here: http://thomasshouler.com/datavis/gugg/ratio.html

I haven't set any positive values to the relevant context attributes (shadowBlur, shadowOffsetY, etc.), so what gives?

Canvas code snippet:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=0;
ctx.shadowOffsetY=0;
var width = 50;
var height = 4;
var grd=ctx.createLinearGradient(0,0,width,0);
grd.addColorStop(0,'#008000');
grd.addColorStop(0.5,'#CCCCCC');
grd.addColorStop(1,'#FF0000');
ctx.fillStyle=grd;
ctx.fillRect(0,0,width,height);

Any wisdom would be greatly appreciated.

Upvotes: 1

Views: 276

Answers (1)

Leeft
Leeft

Reputation: 3837

It's related to scaling as the canvas is displayed. Your original fragment with a very small gradient and scaled up http://jsfiddle.net/CBzu4/ clearly shows the blurred outline.

Drawing larger (making sure there is no css scaling) it looks fine: http://jsfiddle.net/CBzu4/1/ and the code is the same as yours, just rearranged:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var width = 50 * 8;
var height = 4 * 8;

var grd=ctx.createLinearGradient(0,0,width,0);
grd.addColorStop(0,'#008000');
grd.addColorStop(0.5,'#FFFF00');
grd.addColorStop(1,'#FF0000');

ctx.fillStyle = grd;
ctx.fillRect(5,5,width,height);

Same code, but this time the canvas scaled up with the embedded style: http://jsfiddle.net/CBzu4/2/

<canvas id="myCanvas" style="border: 1px solid red; width: 120%; height: 120%;" width="600" height="80">

The final version is again the same as yours, no css scaling at all and no blurred outline: http://jsfiddle.net/CBzu4/3/

Upvotes: 2

Related Questions