We Keep Coding

How to use isPointInPath with resized canvas

I want to implement hover effect with canvas elements. It works fine, if the canvas is not resized.
Code example: jsFiddle
window.onload = function (e)
{
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Draw the rectangle
context.beginPath();
context.rect(50,50,100,100);
context.fill();
context.fillStyle = 'red';
// Draw the circle
context.beginPath();
context.arc(450,175, 50, 0,2 * Math.PI, false);
context.fill();
context.fillStyle = 'green';
// Draw the shape
context.beginPath();
context.moveTo(250,100);
context.lineTo(350,175);
context.lineTo(325,215);
context.lineTo(185,195);
context.fill();
canvas.onmousemove = function (e)
{
var canvas = e.target;
var context = canvas.getContext('2d');
// This gets the mouse coordinates (relative to the canvas)
var mouseX = e.clientX;
var mouseY = e.clientY;
// Replay the rectangle path (no need to fill() it) and test it
context.beginPath();
context.rect(50,50,100,100);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Replay the circle path (no need to fill() it) and test it
context.beginPath();
context.arc(450,175, 50, 0,2 * Math.PI, false);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Replay the irregular shape path (no need to fill() it) and test it
context.beginPath();
context.moveTo(250,100);
context.lineTo(350,175);
context.lineTo(325,215);
context.lineTo(185,195);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Return the cursor to the default style
canvas.style.cursor = 'default';
}
}
html, body {
margin: 0;
padding: 0;
}
<canvas id="canvas" width="500" height="500"></canvas>
As soon as you add style="width: 100%; height: 100%;" to the <canvas>
it is not working anymore. I think isPointInPath is using the "unscaled" version of canvas?
EDIT: Some minutes ago I read about testing isPointInPath in a separate canvas element which is not resized and also not visible to the user. Is this the solution? It heards like a performance killer, since for every mousemove you would need to create a canvas, test, and then delete.

Your problem is that you want to set the canvas to 100%.
But you need to request the width and height of the browser.
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
Browser = {
//get the width of the browser
width : window.innerWidth ||
root.clientWidth ||
body.clientWidth,
//get the height of the browser
height : window.innerHeight ||
root.clientHeight ||
body.clientHeight
};
canvas.style.position = "fixed";
canvas.style.left = 0;
canvas.style.top = 0;
canvas.width = Browser.width;
canvas.height = Browser.height;
// Draw the rectangle
context.beginPath();
context.rect(50,50,100,100);
context.fill();
context.fillStyle = 'red';
// Draw the circle
context.beginPath();
context.arc(450,175, 50, 0,2 * Math.PI, false);
context.fill();
context.fillStyle = 'green';
// Draw the shape
context.beginPath();
context.moveTo(250,100);
context.lineTo(350,175);
context.lineTo(325,215);
context.lineTo(185,195);
context.fill();
canvas.onmousemove = function (e)
{
var canvas = e.target;
var context = canvas.getContext('2d');
// This gets the mouse coordinates (relative to the canvas)
var mouseX = e.clientX;
var mouseY = e.clientY;
// Replay the rectangle path (no need to fill() it) and test it
context.beginPath();
context.rect(50,50,100,100);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Replay the circle path (no need to fill() it) and test it
context.beginPath();
context.arc(450,175, 50, 0,2 * Math.PI, false);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Replay the irregular shape path (no need to fill() it) and test it
context.beginPath();
context.moveTo(250,100);
context.lineTo(350,175);
context.lineTo(325,215);
context.lineTo(185,195);
if (context.isPointInPath(mouseX, mouseY)) {
canvas.style.cursor = 'pointer';
return;
}
///////////////////////////////////////////////////////////////
// Return the cursor to the default style
canvas.style.cursor = 'default';
}
html, body {
margin: 0;
padding: 0;
}
<canvas id="canvas" width="500" height="500"></canvas>
Perhaps you get a little wiser of how I caught the problem.
Here is my simple Browser object:
Browser = {
runTime: 0,
//Updates Browser Info
Update(time = 0) {
this.runTime = time;
//get the width of the browser
this.width = window.innerWidth ||
root.clientWidth ||
body.clientWidth;
//get the height of the browser
this.height = window.innerHeight ||
root.clientHeight ||
body.clientHeight;
//the center of the browser
this.centerX = this.width / 2;
this.centerY = this.height / 2;
}
}
Call in each frame the Browser.Update() so you can update the size of your browser when it changes.
var requestAnimation = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
function AnimationFrame(time) {
Browser.Update(time);
requestAnimationFrame(AnimationFrame);
}
// To start the loop.
AnimationFrame();

Canvas Drawing Application. Rotating Drawing

I am making canvas drawing application and I want to implement rotation of the drawing. But when I rotate it and want to keep drawing mouse cursor isn't pointing at the pixels which are being painted.
How can I fix that?
Here is my code:
<button id="rotate">rotate right</button>
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint = false;
var context = null;
var canvas = null;
canvas = document.getElementById('drawing');
context = canvas.getContext('2d');
rotate.onclick = function() {
context.translate(400,0);
context.rotate(90*Math.PI/180);
draw();
}
canvas.onmousedown = function(e){
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop,false);
draw();
}
canvas.onmousemove = function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
draw();
}
canvas.onmouseup = function(){
paint = false;
}
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
context.clearRect(0, 0, 400, 400);
context.lineJoin = "round";
// usunieto context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i]){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i], clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
}

Applying an transformation to the canvas remains as the canvas state. You need to save the canvas state, apply the transformation, draw, then restore the canvas state. The 2D context API provides ctx.save() and ctx.restore() to do this for you. It uses a stack to save the state so that means saves can be nested but each save must be removed with a matching restore;
ctx.save(); // push the current state onto the save stack
ctx.rotate(Math.PI/2); // rotate 90deg clockwise
// call your draw function
ctx.restore(); // pop the last saved state from the save stack
That should fix you problem.

Cannot clear the canvas

I am trying to clear the canvas for redrawing, it gets clear and when we try to redraw, the previous thing comes back.
Here is my code:
var drawingApp = (function () {
//declaring Variables
var canvas,
canvasDiv,
context,
canvasWidth = 200,
canvasHeight = 200,
clickX = [],
clickY = [],
clickDrag = [],
paint = false;
//Initalisation Function
function init() {
canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if (typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
loadEvents(); //Load events
}
function loadEvents() {
//Mouse down Event
$('#canvas').mousedown(function (e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
//Mouse Move Event
$('#canvas').mousemove(function (e) {
if (paint) {
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
//Mouse Up Event
$('#canvas').mouseup(function (e) {
paint = false;
});
//Mouse Leave Event
$('#canvas').mouseleave(function (e) {
paint = false;
});
}
//Add Click Function
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
//Redraw Function
function redraw() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
// Clears the canvas.
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
return {
init: init,
erase: clearCanvas
};
})();
$(function () {
drawingApp.init();
});
Here is my fiddle
Please see where m getting wrong

When you clear your canvas using the erase function, you fail to clear the clickX, clickY and clickDrag variables. So the next time it draws it still draws the old data.
Updated JSFiddle - http://jsfiddle.net/P8acZ/6/
The code that changed
function clearCanvas() {
clickDrag = [];
clickX = [];
clickY = [];
context.clearRect(0, 0, canvas.width, canvas.height);
}

All Erase button (painting app with canvas)

I followed this tutorial to make a very basic paint app : http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
I stopped at the first step (because it's all I wanted), except that I cannot erase like in the first example shown on the tutorial website. I suppose I made a mistake at linking the javascript function called "redraw" to the Erase button.
Here is my code :
<head>
<title>TEST PAINTING</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', "500");
canvas.setAttribute('height', "200");
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
//
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
$('#clearCanvasSimple').click(function(e){
clearCanvs();
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw()
{
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#333";
context.lineJoin = "round";
context.lineWidth = 8;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
function clearCanvas()
{
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
}
});
</script>
</head>
<body>
<div><button id="clearCanvasSimple" href="javascript:void(0)" onClick="clearCanvas()" type="button">Erase</button></div>
<div class="cadre" id="canvasDiv"></div>
</body>
Does anyone know how I could make this "Erase" button work?
Thank you !

You've set the redraw button to just repaint the code again.
It should be doing something like this:
function clearCanvas()
{
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
});
We clear the current points, then clear the canvas.
Place the clearCanvas function after the redraw function and add the following jquery to register the click on the button (all in side the ready function).
$('#clearCanvasSimple').click(function(e){
clearCanvas();
});

How to select a polygonal area of an image using JavaScript / jQuery?

I'd like to be able to let my users select a specific polygonal (6-8 vertices with curved lines between points) area of an image they upload - how do I go about doing this using HTML5 & JS? The only library I found allows purely rectangular selection: http://odyniec.net/projects/imgareaselect/

There's already a library that does part of what you need: polyclip.js, by Zoltan Dulac You can build a UI that allows the user to select points, then feed the data to the library and you're done.
EDIT: Here is a jsFiddle demonstration. Click to select points on the original image and press the Generate button to generate a cropped version.
HTML:
<div id="mainContent">
<div id="canvasDiv">
<br/>
<button id="generate" type="button">Generate
</button>
</div>
<h1>Result:</h1>
<div class="clipParent" style="float:left;">
</div>
</div>
JS:
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('id', 'canvas');
$(canvasDiv).prepend(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr({width : this.width, height: this.height});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.drawImage(imageObj,0,0);
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
context.arc(clickX[i], clickY[i], 3, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 5;
context.stroke();
}
}
$('#canvas').click(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#generate').click(function(){
$(".clipParent").empty();
$(".clipParent").prepend('<img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" id="genimg" />');
var arr = [];
for(var i=0; i < clickX.length; i++){
arr.push(clickX[i]);
arr.push(clickY[i]);
}
$("#genimg")[0].setAttribute("data-polyclip",arr.join(", "));
clickX=[];
clickY=[];
redraw();
polyClip.init();
});

You could load the image on to a canvas tag and then you can do all the drawing you like on that canvas.