Develop Reference

More than one clip call per context in canvas

I cannot seem to get a second clip call working in canvas. See fiddle: http://jsfiddle.net/m2hL17nu/
Notice how the first radial grad is clipped but the second isn't.
I have seen Can you have multiple clipping regions in an HTML Canvas? but save restore still doesn't seem to be letting the next clip() work.
Thanks in advance for your help. See code below:
var x1 = 300,
y1 = 100,
x2 = 50,
y2 = 50,
r = 20;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function createRadialGradient (xa, ya, xb, yb, r) {
var grd = context.createRadialGradient(xa, ya, 0, xb, yb, r);
grd.addColorStop(0, 'rgba(0,0,0,1)');
grd.addColorStop(1, 'rgba(0,0,0,0)');
context.fillStyle = grd;
context.fill();
}
context.save();
context.rect(x1-r,y1-r,r,r);
context.clip();
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x1, y1, x1, y1, r);
context.restore();
context.save();
context.rect(x2-r,y2,r,r);
context.strokeStyle = 'black';
context.clip();
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x2, y2, x2, y2, r);
context.stroke();

you should use beginPath() and closePath() before drawing the clips and after the clip() methods respectively:
var x1 = 300,
y1 = 100,
x2 = 50,
y2 = 50,
r = 20;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function createRadialGradient (xa, ya, xb, yb, r) {
var grd = context.createRadialGradient(xa, ya, 0, xb, yb, r);
grd.addColorStop(0, 'rgba(0,0,0,1)');
grd.addColorStop(1, 'rgba(0,0,0,0)');
context.fillStyle = grd;
context.fill();
}
context.save();
context.beginPath();
context.rect(x1-r,y1-r,r,r);
context.closePath();
context.clip();
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x1, y1, x1, y1, r);
context.restore();
context.save();
context.beginPath();
context.rect(x2-r,y2,r,r);
context.closePath();
context.clip();
context.strokeStyle = 'black';
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x2, y2, x2, y2, r);
context.stroke();
<canvas id="myCanvas" width="500" height="500"></canvas>

The save() and restore() does not affect the content of the path object itself - only the state of the context (which includes clipping state).
restore() can remove the clip definition but if the path still contains data it will be activated next time you call clip regardless, together with new data added to the path.
To make it work you need to make sure you're working with a clean path. For that simply call beginPath() before defining the clip area with rect(). closePath() is really not necessary with clip() as clip() (and fill()) will close implicit due to it being impossible to clip with an open path.
Then before doing actual drawing call beginPath() again as clipping is now a part of the context state. Finally use restore() to remove the clipping definition (revert state to previous).
context.save(); // store current state to stack
context.beginPath(); // clean path
context.rect(x1-r,y1-r,r,r);
context.clip(); // path is closed; clip is now activated
context.beginPath(); // clean path for your new shape
context.rect(0, 0, canvas.width, canvas.height);
createRadialGradient(x1, y1, x1, y1, r);
...
context.restore(); // removes the clip from state
var ctx = canvas.getContext('2d');
ctx.save();
ctx.beginPath();
ctx.rect(50, 50, 50, 50);
ctx.clip();
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#900';
ctx.fill();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.rect(150, 80, 80, 60);
ctx.clip();
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#009';
ctx.fill();
ctx.restore();
<canvas id=canvas width=500 height=180></canvas>

add an image instead of an object on canvas to exhibit zoom/scale property

I want to add an image on the canvas and then zoom/Scale it
I am trying to add this image file but unable to do so though I can add square and then zoom the canvas.
https://dl.dropboxusercontent.com/u/139992952/houseIcon.png
how can I add the image.
Fiddle:
http://jsfiddle.net/ndYdk/11/
function draw(scale, translatePos){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(translatePos.x, translatePos.y);
context.scale(scale, scale);
context.beginPath(); // begin custom shape
context.rect(20, 20, 50, 50);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();
context.closePath(); // complete custom shape
var grd = context.createLinearGradient(-59, -100, 81, 100);
context.fillStyle = grd;
context.fill();
context.stroke();
context.restore();
}
Any help will be really appreciated.

Is it possible to use two different strokestyles on same path in canvas?

Is it possible to create a path in canvas of which the lines are stroked differently? For example so you could draw a box being green on the inside, with 4 different colored edges. I've included some code, but that does not work, because it draws the path twice (first time unfinished path, second time the whole path).
JavaScript
window.onload = function()
{
canvas = document.getElementById("canvas1");
if (canvas.getContext)
{
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.save();
ctx.moveTo(0, 0);
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.lineTo(100, 100);
ctx.stroke();
ctx.strokeStyle = "rgb(0, 0, 255)";
ctx.lineTo(200, 100);
ctx.stroke();
ctx.restore();
}
}
HTML
<canvas id = "canvas1" width = "400" height = "400">
Your browser does not support the HTML5 canvas tag.
</canvas>

I think you'll have to use two paths.
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.strokeStyle = "rgb(0, 0, 255)";
ctx.stroke();

clearRect function doesn't clear the canvas

I'm using this script on the body onmousemove function:
function lineDraw() {
// Get the context and the canvas:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Clear the last canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the line:
context.moveTo(0, 0);
context.lineTo(event.clientX, event.clientY);
context.stroke();
}
It's supposed to clear the canvas each time I move the mouse around, and draw a new line, but it isn't working properly.
I'm trying to solve it without using jQuery, mouse listeners or similar.
Here is a demo: https://jsfiddle.net/0y4wf31k/

You should use "beginPath()". That is it.
function lineDraw() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.clearRect(0, 0, context.width,context.height);
context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
context.moveTo(0,0);
context.lineTo(event.clientX,event.clientY);
context.stroke();
}

Be advised that ctx.clearRect() does not work properly on Google Chrome. I spent hours trying to solve a related problem, only to find that on Chrome, instead of filling the rectangle with rgba(0, 0, 0, 0), it actually fills the rectangle with rgba(0, 0, 0, 1) instead!
Consequently, in order to have the rectangle filled properly with the required transparent black pixels, you need, on Chrome, to do this instead:
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);
This should, of course, work on all browsers providing proper support for the HTML5 Canvas object.

And beginPath() and stroke() we need to use.
This code works same as clearRect(...)
ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.stroke();

If you're getting a blacked out screen using this method
ctx.beginPath()
ctx.fillStyle = "rgba(0, 0, 0, 255)"
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.stroke();
then switch all the 0's in rgba to 255
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.stroke();

Try with context.canvas.width = context.canvas.width:
function lineDraw() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//context.clearRect(0, 0, context.width,context.height);
context.canvas.width = context.canvas.width;
context.moveTo(0,0);
context.lineTo(event.clientX,event.clientY);
context.stroke();
}
Demo HERE

Skew transformation HTML5 canvas

I'm trying to implement skew transformation using the "x" axis with HTML5 canvas, but my code fails... Here is my JavaScript:
function init() {
var canvas = document.getElementById('skewTest'),
context = canvas.getContext('2d'),
angle = Math.PI / 4;
img = document.createElement('img');
img.src = 'img.gif';
img.onload = function () {
context.setTransform(1, Math.tan(angle), 1, 1, 0, 0);
context.clearRect(0, 0, 200, 200);
context.drawImage(img, 0, 0, 100, 100);
}
}
I'll be very glad if I see working example in JsFiddle.
Thank you in advance!

The correct matrix of skewing in only one direction is
context.setTransform(1, Math.tan(angle), 0, 1, 0, 0);
// ^
With the number at ^ being 1, you are skewing the image in the y-direction by 45° as well.
Sample: http://jsbin.com/etecay/edit#html,live

Canvas can't support direct transform; instead use the below code:
ctx.lineWidth = 100;
ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
ctx.strokeRect(0, 0, 640, 480);
ctx.lineWidth = 4;
ctx.strokeStyle = "#5E81AB";
ctx.strokeRect(50, 50, 540, 380);