I am using the HTML5 canvas API to draw a tile map for a pixel art game. The rendered tile map is comprised of many smaller images that are cut out of a single source image called a tile sheet. I am using drawImage(src_img, sx, sy, sw, sh, dx, dy, dw, dh) to cut the individual tiles out of the source image and draw them onto the destination canvas. I am using setTransform(sx, 0, 0, sy, tx, ty) to apply scale and translation to the final rendered image.
The color "bleeding" issue I need to fix is caused by the sampler, which uses interpolation to blend colors during scale operations in order to make things not look pixelated. This is great for scaling digital photographs, but not for pixel art. While this doesn't do much visual damage to the centers of the tiles, the sampler is blending colors along the edges of adjacent tiles in the source image which creates unexpected colors in the rendered tile map. Instead of only using colors that fall within the source rectangle passed to drawImage, the sampler blends in colors from just outside of its boundaries causing what appear to be gaps between the tiles.
Below is my tile sheet's source image. Its actual size is 24x24 pixels, but I scaled it up to 96x96 pixels in GIMP so you could see it. I used the "Interpolation: None" setting on GIMP's scaling tool. As you can see there are no gaps or blurred borders around the individual tiles because the sampler did not interpolate the colors. The canvas API's sampler apparently does interpolate colors even when imageSmoothingEnabled is set to false.
Below is a section of the rendered tile map with imageSmoothingEnabled set to true. The left arrow points to some red bleeding into the bottom of the gray tile. This is because the red tile is directly below the gray tile in the tile sheet. The sampler is blending the red into the bottom edge of the gray tile.
The arrow on the right points to the right edge of the green tile. As you can see, no color is bleeding into it. This is because there is nothing to the right of the green tile in the source image and therefore nothing for the sampler to blend.
Below is the rendered tile map with imageSmoothingEnabled set to false. Depending on the scale and translation, texture bleeding still occurs. The left arrow is pointing to red bleeding in from the red tile in the source image. The visual damage is reduced, but still present.
The right arrow points to an issue with the far right green tile, which has a thin gray line bleeding in from the gray tile in the source image, which is to the left of the green tile.
The two images above were screen captured from Edge. Chrome and Firefox do a better job of hiding the bleeding. Edge seems to bleed on all sides, but Chrome and Firefox seem to only bleed on the right and bottom sides of the source rectangle.
If anyone knows how to fix this please let me know. People ask about this problem in a lot of forums and get work around answers like:
Pad your source tiles with border color so the sampler blends in the same color along the edges.
Put your source tiles in individual files so the sampler has nothing to sample past the borders.
Draw everything to an unscaled buffer canvas and then scale the buffer, ensuring that the sampler is blending in colors from adjacent tiles that are part of the final image, mitigating the visual damage.
Draw everything to the unscaled canvas and then scale it using CSS using image-rendering:pixelated, which basically works the same as the previous work around.
I would like to avoid work arounds, however if you know of another one, please post it. I want to know if there is a way to turn off sampling or interpolation or if there is any other way to stop texture bleeding that isn't one of the work arounds I listed.
Here is a fiddle showcasing the issue: https://jsfiddle.net/0rv1upjf/
You can see the same example on my Github Pages page: https://frankpoth.info/pages/javascript-projects/content/texture-bleeding/texture-bleeding.html
Update:
The problem arose due to floating point numbers being used when plotting pixels. The solution is to avoid floats and only draw on integers. Unfortunately, this means setTransform cannot be used efficiently because scaling generally results in floats, but I still managed to keep a good bit of math out of the tile rendering loop. Here's the code:
function drawRounded(source_image, context, scale) {
var offset_x = -OFFSET.x * scale + context.canvas.width * 0.5;
var offset_y = -OFFSET.y * scale + context.canvas.height * 0.5;
var map_height = (MAP_HEIGHT * scale)|0; // Similar to Math.trunc(MAP_HEIGHT * scale);
var map_width = (MAP_WIDTH * scale)|0;
var tile_size = TILE_SIZE * scale;
var rendered_tile_size = (tile_size + 1)|0; // Similar to Math.ceil(tile_size);
var map_index = 0; // Track the tile index in the map. This increases once per draw loop.
/* Loop through all tile positions in actual coordinate space so no additional calculations based on grid index are needed. */
for (var y = 0; y < map_height; y += tile_size) { // y first so we draw rows from top to bottom
for (var x = 0; x < map_width; x += tile_size) {
var frame = FRAMES[MAP[map_index]]; // The frame is the source location of the tile in the source_image.
// We have to keep the dx, dy truncation inside the loop to ensure the highest level of accuracy possible.
context.drawImage(source_image, frame.x, frame.y, TILE_SIZE, TILE_SIZE, (offset_x + x)|0, (offset_y + y)|0, rendered_tile_size, rendered_tile_size);
map_index ++;
}
}
}
I'm using Bitwise OR or the | operator to do my rounding. Bitwise Or returns a 1 in each bit position for which the corresponding bits of either or both operands are 1s. Bitwise operations will convert a float to an int. Using 0 as the right operand will match all the bits in the left operand and truncate the decimals. The downside to this is it only supports 32 bits, but I doubt I'll ever need more than 32 bits for my tile positions.
For example:
-10.5 | 0 == -10
10.1 | 0 == 10
10.5 | 0 == 10
In binary:
1010 | 0000 == 1010
This is a rounding issue.
There was already that question about this issue experienced on Safari browser when the context is translated to exactly n.5, Edge an IE are even worse and always bleed one way or an other, Chrome for macOs bleeds on n.5 too, but only when drawing an <img>, <canvas> are fine.
Least to say, that's a buggy area.
I didn't check the specs to know exactly what they should do, but there is an easy workaround.
Compute yourself the transformation of your coordinates so you can control exactly how they'll get rounded and ensure crisp pixels.
// First calculate the scaled translations
const scaled_offset_left = -OFFSET.x * scale + context.canvas.width * 0.5;
const scaled_offset_top = -OFFSET.y * scale + context.canvas.height * 0.5;
// when drawing each tile
const dest_x = Math.floor( scaled_offset_left + (x * scale) );
const dest_y = Math.floor( scaled_offset_top + (y * scale) );
const dest_size = Math.ceil( TILE_SIZE * scale );
context.drawImage( source_image,
frame.x, frame.y, TILE_SIZE, TILE_SIZE,
dest_x, dest_y, dest_size, dest_size,
);
/* This is the tile map. Each value is a frame index in the FRAMES array. Each frame tells drawImage where to blit the source from */
const MAP = [
0, 0, 0, 1, 1, 1, 1, 2, 2, 2,
0, 1, 0, 1, 2, 2, 1, 2, 3, 2,
0, 0, 0, 1, 1, 1, 1, 2, 2, 2,
3, 3, 3, 4, 4, 4, 4, 5, 5, 5,
3, 4, 3, 4, 5, 5, 4, 5, 6, 5,
3, 4, 3, 4, 5, 5, 4, 5, 6, 5,
3, 3, 3, 4, 4, 4, 4, 5, 5, 5,
6, 6, 6, 7, 7, 7, 7, 8, 8, 8,
6, 7, 6, 7, 8, 8, 7, 8, 0, 8,
6, 6, 6, 7, 7, 7, 7, 8, 8, 8
];
const TILE_SIZE = 8; // Each tile is 8x8 pixels
const MAP_HEIGHT = 80; // The map is 80 pixels tall by 80 pixels wide
const MAP_WIDTH = 80;
/* Each frame represents the source x, y coordinates of a tile in the source image. They are indexed according to the map values */
const FRAMES = [
{ x:0, y:0 }, // map value = 0
{ x:8, y:0 }, // map value = 1
{ x:16, y:0 }, // map value = 2
{ x:0, y:8 }, // etc.
{ x:8, y:8 },
{ x:16, y:8},
{ x:0, y:16},
{ x:8, y:16},
{ x:16, y:16}
];
/* These represent the state of the keyboard keys being used. false is up and true is down */
const KEYS = {
down: false,
left: false,
right: false,
scale_down: false, // the D key
scale_up: false, // the F key
up: false
}
/* This is the scroll offset. You can also think of it as the position of the red dot in the map. */
const OFFSET = {
x: MAP_WIDTH * 0.5,
y: MAP_HEIGHT * 0.5
}; // It starts out centered in the map.
const MAX_SCALE = 75; // Max scale is 75 times larger than the actual image size.
const MIN_SCALE = 0; // Texture bleeding seems to only occur on upscale, but min scale is 0 in case you want to try it.
var scale = 4.71; // some arbitrary number that will hopefully cause the issue in your browser
/* Get the canvas drawing context. */
var context = document.querySelector('canvas').getContext('2d', {
alpha: false,
desynchronized: true
});
/* The toggle button is the div */
var toggle = document.querySelector('div');
/* The source image is a 24x24 square with 9 tile images of various colors in it. */
var base_64_image_source = 'data:image/png;base64,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';
var source_image = new Image(); // This will be the source image
/* The keyboard event handler */
function keyDownUp(event) {
var state = event.type == 'keydown' ? true : false;
switch (event.keyCode) {
case 37:
KEYS.left = state;
break;
case 38:
KEYS.up = state;
break;
case 39:
KEYS.right = state;
break;
case 40:
KEYS.down = state;
break;
case 68:
KEYS.scale_down = state;
break;
case 70:
KEYS.scale_up = state;
}
}
/* This is the update and rendering loop. It handles input and draws the images. */
function loop() {
window.requestAnimationFrame(loop); // Perpetuate the loop
/* Prepare to move and scale the image with the keyboard input */
if (KEYS.left) OFFSET.x -= 0.5;
if (KEYS.right) OFFSET.x += 0.5;
if (KEYS.up) OFFSET.y -= 0.5;
if (KEYS.down) OFFSET.y += 0.5;
if (KEYS.scale_down) scale -= 0.5 * scale / MAX_SCALE;
if (KEYS.scale_up) scale += 0.5 * scale / MAX_SCALE;
/* Keep the scale size within a defined range */
if (scale > MAX_SCALE) scale = MAX_SCALE;
else if (scale < MIN_SCALE) scale = MIN_SCALE;
/* Clear the canvas to gray. */
context.setTransform(1, 0, 0, 1, 0, 0); // Set the transform back to the identity matrix
context.fillStyle = "#202830"; // Set the fill color to gray
context.fillRect(0, 0, context.canvas.width, context.canvas.height); // fill the entire canvas
/* [EDIT]
Don't set the transform, we will calculate it ourselves
// context.setTransform(scale, 0, 0, scale, -OFFSET.x * scale + context.canvas.width * 0.5, -OFFSET.y * scale + context.canvas.height * 0.5);
First step is calculating the scaled translation
*/
const scaled_offset_left = -OFFSET.x * scale + context.canvas.width * 0.5;
const scaled_offset_top = -OFFSET.y * scale + context.canvas.height * 0.5;
let map_index = 0; // Track the tile index in the map. This increases once per draw loop.
/* Loop through all tile positions in actual coordinate space so no additional calculations based on grid index are needed. */
for (let y = 0; y < MAP_HEIGHT; y += TILE_SIZE) { // y first so we draw rows from top to bottom
for (let x = 0; x < MAP_WIDTH; x += TILE_SIZE) {
const frame = FRAMES[MAP[map_index]]; // The frame is the source location of the tile in the source_image.
/* [EDIT]
We transform the coordinates ourselves
We can control a uniform rounding by using floor and ceil
*/
const dest_x = Math.floor( scaled_offset_left + (x * scale) );
const dest_y = Math.floor( scaled_offset_top + (y * scale) );
const dest_size = Math.ceil(TILE_SIZE * scale);
context.drawImage( source_image,
frame.x, frame.y, TILE_SIZE, TILE_SIZE,
dest_x, dest_y, dest_size, dest_size
);
map_index++;
}
}
/* Draw the red dot in the center of the screen. */
context.fillStyle = "#ff0000";
/* [EDIT]
Do the same kind of calculations for the "dot" if you don't want antialiasing
// const dot_x = Math.floor( scaled_offset_left + ((OFFSET.x - 0.5) * scale) );
// const dot_y = Math.floor( scaled_offset_top + ((OFFSET.y - 0.5) * scale) );
// const dot_size = Math.ceil( scale );
// context.fillRect( dot_x, dot_y, dot_size, dot_size ); // center on the dot
But if you do want antialiasing for the dot, then just set the transformation for this drawing
*/
context.setTransform(scale, 0, 0, scale, scaled_offset_left, scaled_offset_top);
context.fillRect( (OFFSET.x - 0.5), (OFFSET.y - 0.5), 1, 1 ); // center on the dot
var smoothing = context.imageSmoothingEnabled; // Get the current smoothing value because we are going to ignore it briefly.
/* Draw the source image in the top left corner for reference. */
context.setTransform(4, 0, 0, 4, 0, 0); // Zoom in on it so it's visible.
context.imageSmoothingEnabled = false; // Set smoothing to false so we get a crisp source image representation (the real source image is not scaled at all).
context.drawImage( source_image, 0, 0 );
context.imageSmoothingEnabled = smoothing; // Set smoothing back the way it was according to the toggle choice.
}
/* Turn image smoothing on and off when you press the toggle. */
function toggleSmoothing(event) {
context.imageSmoothingEnabled = !context.imageSmoothingEnabled;
if (context.imageSmoothingEnabled) toggle.innerText = 'Smoothing Enabled'; // Make sure the button has appropriate text in it.
else toggle.innerText = 'Smoothing Disabled';
}
/* The main loop will start after the source image is loaded to ensure there is something to draw. */
source_image.addEventListener('load', (event) => {
window.requestAnimationFrame(loop); // Start the loop
}, { once: true });
/* Add the toggle smoothing click handler to the div. */
toggle.addEventListener('click', toggleSmoothing);
/* Add keyboard input */
window.addEventListener('keydown', keyDownUp);
window.addEventListener('keyup', keyDownUp);
/* Resize the canvas. */
context.canvas.width = 480;
context.canvas.height = 480;
toggleSmoothing(); // Set imageSmoothingEnabled
/* Load the source image from the base64 string. */
source_image.setAttribute('src', base_64_image_source);
* {
box-sizing: border-box;
margin: 0;
overflow: hidden;
padding: 0;
user-select: none;
}
body,
html {
background-color: #202830;
color: #ffffff;
height: 100%;
width: 100%;
}
body {
align-items: center;
display: grid;
justify-items: center;
}
p {
max-width: 640px;
}
div {
border: #ffffff 2px solid;
bottom: 4px;
cursor: pointer;
padding: 8px;
position: fixed;
right: 4px
}
<div>Smoothing Disabled</div>
<p>Use the arrow keys to scroll and the D and F keys to scale. The source image is represented on the top left. Notice the vertical and horizontal lines that appear between tiles as you scroll and scale. They are the color of the tile's neighbor in the source
image. This may be due to color sampling that occurs during scaling. Click the toggle to set imageSmoothingEnabled on the drawing context.</p>
<canvas></canvas>
Note that to draw your "player" dot, you can either choose to do the same caulcations manually to avoid the blurring caused by antialiasing, or if you actually want that blurring, then you can simply set the transform only for this dot. In your position I would probably even make something modular like after a certain scale round, and below smoothen, but I'll let the reader do that implementation.
I am trying to make a linear color gradient "move" by changing the offset of the middle colorStop between values of .2 and .8.
In the code the middle color will move over to the right a little but then stop, sometimes glitching out the color. I also have the value of the offset printing with the loop and it is staying within accepted values, but the middle color won't move back and forth.
Here's the code relevant to what I'm doing:
SetColorGradient: function() {
TextGradient.addColorStop(0,"red");
TextGradient.addColorStop(this.GradChangeOffset,"white");
TextGradient.addColorStop(.8,"blue");
},
Update: function(modifier) {
this.GradChangeOffset = this.GradChangeOffset + (this.GradChangeSpeed * modifier);
//GRADIENT DEBUGGERS
context.strokeText(this.GradChangeOffset.toFixed(2),canvas.width/2,canvas.height/2);
//GRADIENT DEBUGGERS
if (this.GradChangeOffset > .7 || this.GradChangeOffset < .2) {this.GradChangeSpeed = -(this.GradChangeSpeed);}
},
Text.SetColorGradient is run, then Text.DrawText to actually fill the words, then Text.Update is run to change the GradOffset. These methods are run once every iteration.
I'm assuming my problem lies somewhere in .SetColorGradient since my GradOffset is changing back and forth within the values I want.
You cannot remove a color-stop from a CanvasGradient.
This means that after the first loop, you won't change your gradient in any way. It will be the same as a simple red:0 + white:0.2 + white:0.8 + blue:1.
To do what you want, you'll need to create a new gradient at every iteration:
const ctx = c.getContext('2d');
let offset = 0.2;
let speed = .01;
function updateGrad(){
offset = offset + speed;
if (offset > .7 || offset < .2) {
speed = -speed;
}
// you need to create a new gradient
const grad = ctx.createLinearGradient(0, 0, c.width, 0);
grad.addColorStop(0,"red");
grad.addColorStop(offset,"white");
grad.addColorStop(.8,"blue");
ctx.fillStyle = grad;
}
function draw(){
updateGrad();
ctx.fillRect(0,0,c.width,c.height);
requestAnimationFrame(draw);
}
draw();
<canvas id="c"></canvas>
I'm trying to build an app where user can add various objects (rectangles, circles) and he can use mouse wheel to zoom-in and zoom-out.
For this zooming I set up event handler like this:
TheCanvas.on('mouse:wheel', function(options){
var p = new fabric.Point(
options.e.clientX,
options.e.clientY
);
var direction = (options.e.deltaY > 0) ? 0.9 : 1.1;
var newZoom = TheCanvas.getZoom() * direction;
// restrict too big/small zoom here:
if ((newZoom > 50) || (newZoom < 0.7)) return false;
TheCanvas.zoomToPoint( p, newZoom );
}
Everything worked fine until now. Now I want to draw a crosshair over all objects on the canvas. Something like this:
So I made my own custom object like:
CrossHairClass = fabric.util.createClass(fabric.Object, {
strokeDashArray: [1,2], // I want lines to be dashed
........
My problem is:
When user zooms with the mouse wheel, my cross-hair lines zoom their thickness too and also small dashes get bigger. But I don't want that. I want my cross-hair lines be a "hair" lines = ideally 1 pixel thick all the time regardless zoom factor of the canvas. And fine dashed line too.
Render function of my Class:
_render: function (ctx) {
// I tried it like this
var zoom = TheCanvas.getZoom();
var scale = (1/zoom) * 3.333; // with this scale it visually looked the best
// I have to scale it in X and Y while I want small dashes to stay small and also thickness of the line to stay "hair-line"
this.scaleX = this.scaleY = scale;
this.width = CROSSHAIR_SIZE / scale; // my constant from elsewhere
ctx.lineWidth = 1;
ctx.beginPath();
// this example is for horizontal line only
ctx.moveTo(-this.width / 2, 0);
ctx.lineTo(this.width / 2, 0);
this._renderStroke(ctx);
}
I tried various combinations of multiplying or dividing by scale factor or zoom factor but if I finally had lines thin, I couldn't keep their size, which must be constant (in pixels) regardless of canvas zoom. Please help.
P.S.: now I got an idea. Maybe I should create another canvas, over my current canvas and draw this crosshair on the upper canvas, which will not zoom?
EDIT 1
Based on the answer from #andreabogazzi I tried various approaches, but this finally worked out! Thanks! :)
_render: function (ctx) {
var zoom = TheCanvas.getZoom();
// ctx.save(); // this made no difference
// ctx.setTransform(1/zoom, 0, 0, 1/zoom, 0, 0); // this didn't work
this.setTransformMatrix([1/zoom, 0, 0, 1/zoom, 0, 0]);
ctx.strokStyle = 'red';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(-this.widthHalf, 0); // widthHalf computed elsewhere
ctx.lineTo(this.widthHalf, 0);
this._renderStroke(ctx); // I use this instead of ctx.stroke() while this ensures my line is still nicely dashed
// ctx.restore(); // this made no difference
}
Since you created a custom class, you have to invert the zoom of your canvas before drawing.
On the _render function of your subclass, since you should be positioned in the center of your crosshair, apply a transform matrix of scale type, with scale factor of 1/zoomLevel and everything should work.
I would say the correct way is:
_render: function (ctx) {
var zoom = TheCanvas.getZoom();
ctx.save(); // this is done anyway but if you add custom ctx transform is good practice to wrap it in a save/restore couple
ctx.transform(1/zoom, 0, 0, 1/zoom, 0, 0);
ctx.strokStyle = 'red';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(-this.widthHalf, 0); // widthHalf computed elsewhere
ctx.lineTo(this.widthHalf, 0);
this._renderStroke(ctx); // I use this instead of ctx.stroke() while this ensures my line is still nicely dashed
ctx.restore(); // this is done anyway but if you add custom ctx transform is good practice to wrap it in a save/restore couple
}
Now it happens that this object get cached from the fabricJS cache system that will probably create the cache depending on the canvas zoom too.
I have no understanding of the final use of this object, but you should include this calculation also in the cache canvas size calculation.
I'm working on a gradient stroke for a "loading circle" using createJS. However, I only need the gradient effect to be applied on one "joining point" of the two colors, and not apply it on the other joining point.
What I did was this, but it's only giving me a normal gradient effect:
var rd = 64;
timerCount.graphics.setStrokeStyle(8)
/* yellow ,red*/
.beginLinearGradientStroke( ["#F7CC00","#FE1D1E"] ,[0,1] ,0,rd*0.5 ,0,-rd );
Please refer to the image below:
Anyone knows how I can do this?
Here's my code in JSFiddle:
https://jsfiddle.net/flamedenise/gg9aabug/18/
Thank you and Happy New Year ahead!
You are not looking for a radial gradient, but rather a conical gradient (or angle gradient in Photoshop), which Canvas does not support directly. I did a quick search on Angle Gradients, and found a few ideas that might help:
http://www.nixtu.info/2010/08/html5-canvas-gradients-angular-gradient.html
https://gist.github.com/akm2/3721702
Angle gradient in canvas
Best of luck.
I have managed to create a workaround to achieve this! Since beginLinearGradientStroke() only creates a "normal" gradient, I figured out overlaying it with another gradient (with transparent as the second color) would work.
What I did was create the first circle with two colors that appear as "solid" (by setting the ratios and x and y positions accordingly) and then overlaid it with another gradient circle - with one color the combination of the first two colors, and the other one transparent.
Here's the JSFiddle showing the final outcome:
https://jsfiddle.net/flamedenise/n9no9Lgw/
var rd = 64;/*radius*/
var circles = {};
var ic = [
/*0*/{ a:"#FEC331" ,b:"#FB1E24" ,r1:0.5 ,r2:0.5 ,x0:0 ,y0:rd*0.3 ,x1:0 ,y1:-rd},
/*1*/{ a:"#EA6F2B" ,b:"transparent" ,r1:0 ,r2:1 ,x0:-rd ,y0:0 ,x1:rd ,y1:0 }
];
var circleX = [ 0.5 ,0.75 ];
var circleY = [ 0.7 ,0.7 ];
for(var i=0; i<2; i++){
circles[l][i] = new createjs.Shape();
circles[l][i].graphics.setStrokeStyle(8)
.beginLinearGradientStroke( [ ic[k].a ,ic[k].b ], [ic[k].r1, ic[k].r2], ic[k].x0,ic[k].y0 ,ic[k].x1,ic[k].y1 );
circles[l][i].rotation = -90;
circles[l][i].x = ww*circleX[l];
circles[l][i].y = wh*circleY[l];
var arcCommand = circles[l][i].graphics.arc(0, -20, rd, 600 * Math.PI, 0).command;
if (run == 1) {
createjs.Tween.get(arcCommand)
.to({
endAngle: (360 * Math.PI / 180)
}, time * 1000);
}
circleStage.addChild(circles[l][i]);
}/*END for loop*/
I`m new with canvas so thanks for your patience.
I wrote an engine that is creating 2 different layers in 2 canvas elements which are one over another. They contain some generated pictures, which aren`t important here.
I'm trying to create an effect which will display bottom layer when I move mouse over the top layer and click.
Something like this:
This is what I have tried so far:
To use transparency on canvas element and display bottom canvas (fast but not usable)
Re-create a clipping region.
Whenever I press the mouse I store current coordinates and re-render the canvas with updated clipping region
Updating clipping region is slow if I use stroke to create shadows + I`m not sure how to remove lines from it (see picture).
If I remove shadow effect, it works really fast, but I need to have it.
The only thing that comes on my mind how to speed this, is to save coordinates of every click, and then to re-calculate that into 1 shape and drop a shadow on it - I`ll still have lines, but it will be faster because there won`t be thousand of circles to draw...
Any help will be most appreciated!
You can take advantage of the browser's built in interpolation by using it as a pseudo low-pass filter, but first by painting it black:
Copy the top layer to the bottom layer
Set source-in comp. mode
Draw all black
Set source-in comp. mode
Scale down image to 25%
Scale the 25% region back up to 50% of original (or double of current)
Scale the now 50% region back up to 100% of original. It will be blurred.
Depending on how much blur you want you can add additional steps. That being said: blurred shadow is an intensive operation no matter how it is twisted and turned. One can make compromise to only render the shadow on mouse up for example (as in the demo below).
Example
Example using two layers. Top layer let you draw anything, bottom will show shadow version at the bottom later while drawing.
var ctx = document.getElementById("top").getContext("2d"),
bctx = document.getElementById("bottom").getContext("2d"),
bg = new Image(),
isDown = false;
bg.src = "http://i.imgur.com/R2naCpK.png";
ctx.fillStyle = "#27f";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.globalCompositeOperation = "destination-out"; // "eraser"
ctx.canvas.onmousedown = function(e) {isDown = true};
window.onmousemove = function(e) {
if (!isDown) return;
var pos = getPos(ctx.canvas, e);
ctx.beginPath();
ctx.moveTo(pos.x + 10, pos.y);
ctx.arc(pos.x, pos.y, 10, 0, 2*Math.PI); // erase while drawing
ctx.fill();
};
window.onmouseup = function(e) {
if (isDown) {
isDown = false;
makeShadow();
}
};
function makeShadow(){
var w = bctx.canvas.width,
h = bctx.canvas.height,
offset = 7,
alpha = 0.75;
// reset alpha
bctx.globalAlpha = 1;
// normal comp mode to clear as it is faster than using "copy"
bctx.globalCompositeOperation = "source-over";
bctx.clearRect(0, 0, w, h);
// copy top-layer to bottom-layer
bctx.drawImage(ctx.canvas, 0, 0);
// comp. mode will only draw in to non-alpha pixels next
bctx.globalCompositeOperation = "source-in";
// black overlay
bctx.fillRect(0, 0, w, h);
// copy mode so we don't need an extra canvas
bctx.globalCompositeOperation = "copy";
// step 1: reduce to 50% (quality related - create more steps to increase blur/quality)
bctx.drawImage(bctx.canvas, 0, 0, w, h, 0, 0, w * 0.5, h * 0.5);
bctx.drawImage(bctx.canvas, 0, 0, w * 0.5, h * 0.5, 0, 0, w * 0.25, h * 0.25);
bctx.drawImage(bctx.canvas, 0, 0, w * 0.25, h * 0.25, 0, 0, w * 0.5, h * 0.5);
// shadow transparency
bctx.globalAlpha = alpha;
// step 2: draw back up to 100%, draw offset
bctx.drawImage(bctx.canvas, 0, 0, w * 0.5, h * 0.5, offset, offset, w, h);
// comp in background image
bctx.globalCompositeOperation = "destination-over";
bctx.drawImage(bg, 0, 0, w, h);
}
function getPos(canvas, e) {
var r = canvas.getBoundingClientRect();
return {x: e.clientX - r.left, y: e.clientY - r.top};
}
div {position:relative;border:1px solid #000;width:500px;height:500px}
canvas {position:absolute;left:0;top:0}
#bottom {background:#eee}
<div>
<canvas id="bottom" width=500 height=500></canvas>
<canvas id="top" width=500 height=500></canvas>
</div>