CanvasContext2D drawImage() issue [onload and CORS]
You have to wait that your image has loaded before you can paint it on the canvas.
To do so, simply use the load
event handler of your <img>
element :
// create a new image
var img = new Image();
// declare a function to call once the image has loaded
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0);
var dataURL = canvas.toDataURL();
// now you can do something with the dataURL
doSomething(dataURL);
}
// now set the image's src
img.src = "http://somerandomWebsite/picture.png";
Also, for the canvas' context.toDataURL()
and context.getImageData
to work properly, you have to get your image resource in a cross-origin compliant way, otherwise the canvas is "tainted" which means that any method to get pixels data will be blocked.
- If your image comes from the same server, no problem.
- If your image is served from an external server, be sure that it allows yours in its cross-origin headers and set the
img.crossOrigin
to"use-credentials"
. - If the server does allow anonymous requests, you can set the
img.crossOrigin
to"anonymous"
.
Nota Bene : CORS header is sent by the server, the cross-origin
attribute will only let it know that you want to use CORS to get the image data, in no way you can circumvent it if the server is not set properly.
Also some UserAgents (IE & Safari) still haven't implemented this attribute.
Edge Case : If some of your images are from your server and some are from a CORS compliant one, then you may want to use the onerror
event handler which should fire if you set the cross-origin
attribute to "anonymous"
on a non CORS server.
function corsError(){
this.crossOrigin='';
this.src='';
this.removeEventListener('error', corsError, false);
}
img.addEventListener('error', corsError, false);
html canvas problems with context.drawImage()
change:
groundImg.addEventListener("load", startDraw());
to:
groundImg.addEventListener("load", startDraw);
Image doesn´t appear canvas
Next comes my code but it won't work on Stack Overflow. You will have to copy the code and test it in your computer. You can see it working in this Codepen project.
IMPORTANT: you have to use an image from your site. Otherwise you'll get an error like this: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. And yes, there are some ways to circumvent this problem. Not always working
An observation about your code: Please don't do this: data[i]-100
since data[i]
may be smaller than 100.
function drawing() {
var data;
var canvas = document.getElementById("cnv1");
var cw = (canvas.width = 270);
var ch = (canvas.height = 250);
var context = canvas.getContext("2d");
var img=new Image();
img.src = "image.jpg";
img.onload = function() {
context.drawImage(this, 10, 10);
var imageData = context.getImageData(0, 0, 270, 250);
data = imageData.data;
console.log(imageData.data)
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i];
data[i + 1] = 255 - data[i + 1];
data[i + 2] = 255 - data[i + 2];
}
context.putImageData(imageData, 0, 0);
}
}
drawing()
<canvas id="cnv1"></canvas>
Can't draw image in canvas JavaScript
You should execute the draw on the window.onload
just to prevent it from running before the content is loaded.
Here is an example:
const cvs = document.getElementById("gameArea");
cvs.width = cvs.height = 800;
const ctx = cvs.getContext("2d");
let playArea = new Image();
playArea.src="https://upload.wikimedia.org/wikipedia/commons/e/e2/3D_Gyroscope.png";
function draw(){
ctx.drawImage(playArea,0,0);
}
window.onload = function() {
draw();
}
<canvas id=gameArea></canvas>
drawImage() is not working
Here's your problem:
ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0);
You've got your image width and height set to 0
. Switch it to this instead:
ctx.drawImage(document.getElementById('Mario'), 0, 0, 50, 61);
html canvas draw image not working
Try including the width
, height
at .drawImage()
call; that is
The actual solution, as patiently pointed out by @Kaiido , is to use onload
event attribute attached to <img>
element
<img id="image" onload="draw()" src="http://lorempixel.com/50/50" width="200" height="276" alt="Sample Image" />
<canvas id="canvas" width="220" height="286"></canvas>
<script>
function draw() {
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img,0,0);
}
</script>
or HTMLImageElement.addEventListener("load", handler)
Related Topics
How to Get the Browser Viewport Dimensions
What Is Destructuring Assignment and Its Uses
How May I Reference the Script Tag That Loaded the Currently-Executing Script
Checking If a Key Exists in a JavaScript Object
How Does "This" Keyword Work Within a Function
JavaScript Get Clipboard Data on Paste Event (Cross Browser)
Disable/Enable an Input With Jquery
What Is Spreadelement in Ecmascript Documentation? Is It the Same as Spread Syntax At Mdn
How to Do Case Insensitive String Comparison
How to Retrieve Get Parameters from JavaScript
Question Mark and Colon in JavaScript
Resizing an Iframe Based on Content
Is There a "Null Coalescing" Operator in JavaScript
How to Check If Element Is Visible After Scrolling
JavaScript Check If Variable Exists (Is Defined/Initialized)