Develop Reference

Chrome will not display "new Image()" in canvas

Beginner dev here. One of my lessons is to place (and transform) an image into canvas using only the Image() constructor. That is to say, NOT creating a variable that is linked to an image element located in the HTML code. Consider the following:
<script type = "text/javascript">
function draw(){
var drawing = document.getElementById("drawing");
var con = drawing.getContext("2d");
var dog = new Image();
dog.src = "dog.jpg";
//begin transformation
con.save();
con.translate(200, 100);
con.rotate(25*Math.PI/180);
con.drawImage(dog, 0, 0);
con.restore();
}
</script>`
I used some CSS to outline the canvas in red and move it closer to the center of the screen for visibility's sake. Despite all my efforts, Chrome will not display the image, but IE will. However, IE does require a prompt for the image to show: "Internet Explorer restricted this webpage from running scripts or ActiveX controls." After allowing this with the button that they provide, the image displays.
Chrome, on the other hand, does not provide a prompt of any kind. I've looked around extensively for an answer to this and even went so far as to enable/disable all the script running options and extensions (popups and downloads included) to no avail.
Just to be clear, I'm aware that there are other ways for the image to display properly, but my concern is for why it won't work with Chrome in this context.

Your code is not waiting for the image to load:
var drawing = document.getElementById("drawing");
var con = drawing.getContext("2d");
var dog = new Image();
//begin transformation
dog.onload = function() {
con.save();
con.translate(200, 100);
con.rotate(25*Math.PI/180);
con.drawImage(dog, 0, 0);
con.restore();
};
dog.src = "dog.jpg";
By putting the image copy code into the "load" handler, you ensure that the image pixels are actually available. There's no significant performance penalty to pay if the image happens to already be in the browser cache.

Android drawImage to canvas from video on pause

I have a really strange issue and I can't tell if it's an Android issue or something else.
Basically I have a video that plays and everytime pause is selected, I want to take a screen shot of the video using the HTML5 canvas technique drawImage() and add it to the canvas. This works perfectly on the first pause but after I start the video again and on any subsequent pause, drawImage() draws the image from the first time I paused to the canvas. The code works fine in Chrome/Firefox, just not on my Android device.
I have included the code below, any advice would be great.
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('v').addEventListener('pause',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
//i even remove the canvas from the stage
$( '#c' ).remove();
//and re add a canvas to the dom
$('#canvasdrawer').html('<canvas id="c"></canvas>');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 100);
var ch = Math.floor(canvas.clientHeight / 100);
canvas.width = cw;
canvas.height = ch;
setTimeout(function(){
alert("timeout running");
//i have even tried to put it in a timeout to almost force refresh but that doesnt help
context.drawImage(document.getElementById('v'),0,0,cw,ch);
}, 2000);
}
},false);

canvas does not draw image on load

I started to play with canvas coding and I'm stuck on a (most likely) very easy issue. I have a code which on click lads some image, and I would like to put the image on canvas when it's loaded. When I go to diagnostic tools in Chrome, the pictures get loaded and there is no errors in the console, yet the images do get drawn on the canvas.
any ideas why?
sAlphaF = new Image();
sAlphaF.src = '/img/sAlpha_'+tbaID+'_f.png';
sAlphaF.onload = function(){
var ctxs=gc.getContext("2d");
ctxs.drawImage(sAlphaF,0,0, gc.width, gc.length);
};
tAlphaF = new Image();
tAlphaF.src = '/img/tAlpha_'+tbaID+'_f.png';
tAlphaF.onload = function(){
var ctxt=bc.getContext("2d");
ctxt.drawImage(tAlphaF,0,0, bc.width, bc.length);
};

Change your bc.length property to bc.height ;)

Video drawn on HTML canvas only plays in chrome, even with webm

I am drawing a video to a canvas and then drawing another image on top of it with a blend mode. So far my video works on chrome but not on firefox or safari. When I open with Firefox I see the blended canvas for a second and then it disappears. When I look in safari it shows the top image (which is a face)
I have an mp4 and a webm video uploaded to my website and when I inspect the code and show the video I can see that it is actually playing in firefox, which is confusing because it is like it has found the image and video data?
Is there something I need to do to get the video to work on all browsers?
Below is the code I am using and here is a link to the website (only works as supposed to in chrome at the moment) - http://chrisgjones.com/category/double-exposure/
var img1 = document.getElementById('img1'),
bg = document.getElementById('img2'),
canvas = document.getElementById("canvas"),
video = document.getElementById('video');
context = canvas.getContext("2d"),
blendMode = "multiply";
context.globalCompositeOperation = "source-over"; // dont apply blending to bg image
video.addEventListener('play', function () {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
context.drawImage($this, 0, 0, canvas.width, canvas.height);
setTimeout(loop, 1000 / 30); // drawing at 30fps
context.globalCompositeOperation = blendMode;
context.drawImage(img1, 0, 0, canvas.width, canvas.height);
}
})();
}, 0);
$(window).load(function(){
video.play();
});

I guess you mean setInterval instead of setTimeout. But anyway, better use requestAnimationFrame.

canvas is cleared on mousedown, sketch.js & jquery 2.0.0

11I'm using sketch.js from here: http://intridea.github.io/sketch.js/ and jquery 2.0.0
On my page, I have a list of images presented like so:
<img src="http://url.to/image"><br><span class="background">click for background</span>
and a canvas, set up like so:
<canvas id="simple_sketch" style="border: 2px solid black;"></canvas>
relevant JavaScript:
var winwidth = 800;
var winheight = 600;
$('#simple_sketch').attr('width', winwidth).attr('height', winheight);
$('#simple_sketch').sketch();
$('.background').on('click', function(event) {
event.preventDefault();
var imgurl = $(this).parent().attr('href');
console.log('imgurl: ' + imgurl);
var n = imgurl.split('/');
var size = n.length;
var file = '../webkort/' + n[size - 1];
var sigCanvas = document.getElementById('simple_sketch');
var context = sigCanvas.getContext('2d');
var imageObj = new Image();
imageObj.src = imgurl;
imageObj.onload = function() {
context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
};
alert('background changed');
});
Backgrounds are changed just as I want them to, but whenever I click on the canvas, the backgound image is cleared. As per a suggestion on this thread: html5 canvas background image disappear on mousemove I commented out this.el.width = this.canvas.width(); on line 116 of sketch.js, but to no avail.
Any help appreciated!
EDIT: jsfiddle: http://jsfiddle.net/RXFX4/1/
EDIT: Couldn't figure out how to do this with sketch.js, so instead went with jqScribble (link posted in comments) which has the ability to do this as a built-in function instead.

Find this line on the library - sketch.js and delete/comment it out.
this.el.width = this.canvas.width();
Good luck

Assign the url on the image source after the onload event. If the image is already loaded, the event is probably firing before you are hooking it. Which means that your drawImage is never being called.
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
};
imageObj.src = imgurl;
EDIT: I'm going to take a shot in the dark here, since I'm not familiar with sketchjs
I'm thinking that your problem is that you are completely re-render the canvas when you click your 'change background' link. Notice that if you draw, then click the change background, you lose your drawing.
However, notice that once you click again, the background disappears, and you get your original drawing back again. This tells me that sketchjs is keeping track of what has been drawn on it's own in-memory canvas, and then it drops it onto the target. The problem, then, is that when this in-memory canvas is drawn, it completely replaces the contents of the target canvas with it's own.
I notice in some of the sketchjs examples, if you want a background they actually assign the canvas a background style. In your example, you are drawing the background directly onto the canvas. The prior probably works because sketchjs knows to incorporate the background style when it draws. However, it does not know that when you drew your fresh background image, it should be using that.
Can you just change the background style on the canvas element, instead of drawing directly on the canvas?