We Keep Coding

HTML Canvas doesn't diplay rectangle if written to off screen canvas

I have tried to create an HTML page with a full screen canvas and I can draw to this fine. If I create a second "off screen" canvas to draw on and display on the main canvas I do not see anything.
My code is:
var canvas;
var canvas_ctx;
var off_canvas = document.createElement('canvas');
var off_canvas_ctx;
init();
drawTree();
function init() {
canvas = document.getElementById('treeCanvas');
if (canvas.getContext) {
canvas_ctx = canvas.getContext("2d");
window.addEventListener('resize', resizeCanvas, false);
window.addEventListener('orientationchange', resizeCanvas, false);
resizeCanvas();
}
off_canvas.width = 5000;
off_canvas.height = 5000;
off_canvas_ctx = off_canvas.getContext('2d');
}
function resizeCanvas() {
var cWidth = window.innerWidth;
var cHeight = window.innerHeight - 3;
var imgData = canvas_ctx.getImageData(0, 0, cWidth, cHeight);
// Resize original canvas
canvas.width = cWidth;
canvas.height = cHeight;
// Copy back to resized canvas
canvas_ctx.putImageData(imgData, 0, 0);
}
function drawTree() {
canvas_ctx.fillStyle = "#FF0000";
canvas_ctx.fillRect(0, 0, 150, 75);
off_canvas_ctx.fillStyle = "#FF0000";
off_canvas_ctx.fillRect(0, 0, 150, 75);
resizeCanvas();
}
<div align="center">
<canvas id="treeCanvas" width="200" height="100">
Your browser does not support the canvas element.
</canvas>
</div>
My "drawTree()" function currently draws the same thing to both canvas contexts and then calls "resizeCanvas()" in order to update the display.
If I use the line
var imgData = canvas_ctx.getImageData(0, 0, cWidth, cHeight);
in "resizeCanvas()", the rectangle displays but if I try to use the image data from the off screen canvas with the line
var imgData = off_canvas_ctx.getImageData(0, 0, cWidth, cHeight);
then nothing is displayed. Can anyone see what I am doing wrong?

My mistake, in the "init()" function i was calling "resizeCanvas()" before i had got the context to the second canvas, this seemed to mess it up for the rest of the session.
canvas_ctx = canvas.getContext("2d");
off_canvas.width = 5000;
off_canvas.height = 5000;
off_canvas_ctx = off_canvas.getContext('2d');
Moving the block up appears to have fixed the problem.

Trying to rotate image while keep aspect ratio of the picture

Basically what my project does is to fetch a picture from Database, place it into canvas, move it, zoom in and out, this this are working perfectly.
Next step is to rotate the picture and i have no idea what I am doing wrong. In the picture i described how my document looks like when the canvas is accessed. After I rotate the picture, it goes outside the canvas. My code looks like below and i have no idea what I am doing wrong. Thank you
function drawRotated(degrees) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(image.width*0.15,image.height*0.15);
ctx.rotate(degrees * Math.PI / 180);
ctx.translate(-image.width*0.15,-image.height*0.15);
ctx.drawImage(image, 0, 0, image.width*0.15, image.height*0.15);
}

Maybe this is not the answer you are expecting for. I didn't use your code. I hope it helps.
The main idea is to draw the image with the center in the origin of the canvas.
window.onload = function() {
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
var gkhead = gk;
gkhead.src = gk.src;
let w = gkhead.width;
let h = gkhead.height;
let x = -w/2;
let y = -h/2;
ctx.drawImage(gkhead,x,y,w,h);
function translateToThePoint(p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}
function rotate(angleInRad, p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.rotate(angleInRad);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}
let p = {x:canvas.width/2,y:canvas.height/2}
//translateToThePoint(p);
rotate(-Math.PI/10,p);
}
canvas {
border:1px solid
}
<canvas id="canvas">
<img id="gk" src='https://www.warrenphotographic.co.uk/photography/cats/38088.jpg' />
</canvas>

ctx.addEventListener makes canvas drawing disappear

When I add
ctx.addEventListener('mousedown', onDown, false);
The canvas drawing (background and shapes) disappear and the page is blank, and then when I remove this event listener from the code they reappear again. Just wondering why this is happening? Thanks in advance
<script>
var ctx, W, H;
var x = 10;
window.onload = function() {
var canvas = document.getElementById("canvas");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
ctx.addEventListener('mousedown', onDown, false); //When this is here, canvas drawing disappears, when it's not here canvas drawing reappears again
setInterval(draw, 1);
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#E6E6FF";
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = "black";
ctx.fillRect(x,20,10,10);
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,80);
ctx.fill();
}
}
function onDown(event) {
//where x is found
cx = event.pageX
cy = event.pageY
alert("X,Y ="+cx+','+cy);
}

You can't add an event listener to the canvas's context. You'll need to add it to the canvas itself.
Instead of:
ctx.addEventListener('mousedown', onDown, false);
… do this:
canvas.addEventListener('mousedown', onDown, false);

jsBin demo
use:
ctx.canvas.addEventListener
or:
canvas.addEventListener
cause context is just an Object in which the HTMLElementCanvas lives in.
To spot such errors your-self, the easiest way is to debug your code using Developer Tools, opening the console tab and reading the errors you're shown:

Javascript canvas: animate box on touch, view only borders

I am trying to do a simple animation with html5. Please take a look at the link below, through a touch screen device.
https://dl.dropbox.com/u/41627/wipe.html
The problem is as follows : Every time the user touches the screen , a box gets drawn around his finger which animates from small to big. I want just the outer most boundary to be visible and not the rest. I do not want to clear the canvas as I want the state of the rest of the canvas to be preserved.
Images to illustrate the issue:
My code is as follows :
function init() {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function () {
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.globalCompositeOperation = 'destination-out';
}
img.src = "https://dl.dropbox.com/u/41627/6.jpg";
function drawPoint(pointX,pointY){
var grd = ctx.createRadialGradient(pointX, pointY, 0, pointX, pointY, 30);
grd.addColorStop(0, "rgba(255,255,255,.6)");
grd.addColorStop(1, "transparent");
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(pointX,pointY,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
}
var a = 0;
var b = 0;
function boxAround(pointX,pointY, a, b) {
ctx.globalCompositeOperation = 'source-over';
ctx.strokeStyle = "black";
ctx.strokeRect(pointX-a, pointY-b, (2*a), (2*b));
ctx.globalCompositeOperation = 'destination-out';
if(a < 100) {
setTimeout(function() {
boxAround(pointX,pointY, a+5, b+5);
}, 20);
}
}
canvas.addEventListener('touchstart',function(e){
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
boxAround(e.touches[0].screenX,e.touches[0].screenY,0 , 0);
},false);
canvas.addEventListener('touchmove',function(e){
e.preventDefault();
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
},false);

You can achieve this effect by either using a second canvas, or even just having the box be a plain <div> element that is positioned over the canvas. Otherwise, there is no way around redrawing your canvas.

How can I clear canvas?

Hi I'm doing a drawing app using canvas but i dunno how to clear canvas.
I've tried clearRect and other functions but they don't work.
The last two function of the script should clear canvas but they don't work...
(sorry for my bad english)
Here the code:
function clear_canvas_width ()
{
var s = document.getElementById ("scribbler");
var w = s.width;
s.width = 10;
s.width = w;
}
function clear_canvas_rectangle ()
{
var canvas = $('#canvas')[0]; // or document.getElementById('canvas');
canvas.width = canvas.width;
}

Need a bit more code to really see what the problem is. Here is something really simple that you can go off of to maybe narrow it down. Also for performance reasons its better to use clearRect over resetting the width of the canvas. How you clear your canvas matters
Live Demo
var clearBut = document.getElementById("clearCan"),
canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 300;
ctx.fillRect(10,10,280,280);
function clearCanvas(){
ctx.clearRect(0,0,canvas.width, canvas.height);
}
clearBut.addEventListener("click", clearCanvas);
​

Have you checked whether you are clearing the right canvas? Maybe if you provide us with more code we can help you further.
Also make sure you don't draw over it after you have cleared it.
However, when it comes to clearing canvases this is the easiest way I know.
function clear_canvas( canvas ){
canvas.width = canvas.width;
}
But you can also use
function clear_canvas (ctx, canvas){
ctx.clearRect(0, 0, canvas.width, canvas.height);
}

from;
How to clear the canvas for redrawing
// Store the current transformation matrix
ctx.save();
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
ctx.restore();