I've tried this a few different ways, but I keep getting stuck with the same error. I've loaded an image to canvas before, but since I updated Safari a few days ago, I'm getting errors.
I'll post what I have at the moment, but I've tried doing it with jQuery, html's onLoad property, etc.
var cvs, ctx, img;
function init() {
cvs = document.getElementById("profilecanvas");
ctx = cvs.getContext("2d"); /* Error in getContext("2d") */
img = document.getElementById("profileImg");
drawImg();
}
function drawImg() {
ctx.drawImage(img, 0, 0);
}
window.onload = init();
The IDs are correct and correspond to appropriate canvas and img tags. However, I keep getting TypeError: 'null' is not an object (evaluating 'cvs.getContext')
and it doesn't seem to be getting any further. I'm sure it's some ID10T error, but I'm hoping someone can give me a clue as to what's causing this? Thank you.
Edit:
Okay, so this seems to work using <body onload="init()">
now. However, it only displays occasionally, and if I try to run init()
off of $(document).ready()
or document.onload
I still have no luck, and receive the error. Any thoughts?
For others who hit this page while searching for getContext
returning null, it can happen if you have already requested a different type of context.
For example:
var canvas = ...;
var ctx2d = canvas.getContext('2d');
var ctx3d = canvas.getContext('webgl'); // will always be null
The same is equally true if you reverse the order of calls.