Safari Canvas problem

**NickFitz** · 22 September 2009, 00:26

Sorry xog, haven't had a chance to look at this today - I'll try to find time tomorrow evening, although that will be with Safari for Mac.

I assume you're using Safari for Windows? Which version are you on?

FWIW, nightly builds of Safari are available at http://nightly.webkit.org/ - you might want to download the latest (it won't interfere with your existing Safari installation) and see if it's a bug that has already been fixed for the next version.

**xoggoth** · 22 September 2009, 19:21

Cheers for link nick but don't worry if (unusual for you!) you don't have an instant answer. For now I've just put a note to Safari users to refresh after open.

Update. Been fiddling around and it's working now tho. can't see how anything I did was at all relevant to the problem.

Update 2. Sod, now it's doing odd things in Chrome! Picture scaling is wrong! It's a different fault but that too goes away on refresh!!! Grrrr!

**xoggoth** · 23 September 2009, 10:17

Bum. Seems to be a problem with Chrome and Safari. Resize and/or paint operations with canvas do not appear to complete properly on open if online, ok locally. These are the only two that use applewebkit. Can't see how one can refresh in jscript without using cookies or getting into a loop.

**NickFitz** · 23 September 2009, 12:36

Originally posted by xoggoth View Post

Bum. Seems to be a problem with Chrome and Safari. Resize and/or paint operations with canvas do not appear to complete properly on open if online, ok locally. These are the only two that use applewebkit. Can't see how one can refresh in jscript without using cookies or getting into a loop.

Well, as canvas was first introduced by WebKit, I could go for the IE argument and say that all the others must be doing it wrong

Can you try:

Code:

canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById('backimage'), 0, 0, canvas.width, canvas.height);

and see if that makes a difference?

**NickFitz** · 23 September 2009, 18:57

The following worked for me - once I'd remembered to put the image file in the right place... Safari 4.0.3 on Mac; I'm still on OS X 10.4 so I can't test with Chrome. Here's a link too

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>xog's canvas stuff</title>
<style type="text/css">

#chimpImg {
    display: none;
}

</style>

<script type="text/javascript">

window.onload = function() {
    var image = document.getElementById("chimpImg");
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}

</script>
</head>
<body>
<div>
  <img id="chimpImg" src="chimpanzee.jpg" alt="A chimpanzee">
  <canvas id="canvas" width="370" height="513"></canvas>
</div>
</body>
</html>

**xoggoth** · 23 September 2009, 21:10

Cheers nick. There was a reason for that indirect assignment, if I referenced the image directly in the drawimage it did not rescale properly and I was getting scaling and DOM errors although looking at it again those seem to have been due to rescaling the image to fit the screen (cos it has to work in IE using a completely different method) and then applying it to a resized canvas using a method that rescales anyway.

PS Unfortunately, pointing directly to an unscaled image hasn't solved the problem in Chrome. Bunged a resize and a count on click to check your code and it works on and off line in Chrome but darned if I can see any significant difference to mine. Look again tomorrow or next day (CT to do!). Thanks for for the input.

PPS I used a raspberry as I couldn't find a chimpanzee.

**NickFitz** · 23 September 2009, 23:58

Originally posted by xoggoth View Post

Cheers nick. There was a reason for that indirect assignment, if I referenced the image directly in the drawimage it did not rescale properly and I was getting scaling and DOM errors although looking at it again those seem to have been due to rescaling the image to fit the screen (cos it has to work in IE using a completely different method) and then applying it to a resized canvas using a method that rescales anyway.

PS Unfortunately, pointing directly to an unscaled image hasn't solved the problem in Chrome. Bunged a resize and a count on click to check your code and it works on and off line in Chrome but darned if I can see any significant difference to mine. Look again tomorrow or next day (CT to do!). Thanks for for the input.

NP - let me know if you need any further testing doing. It would be handy to be able to see all of the code so as to check if any of the cross-browser stuff was interacting in a not-so-good manner

Originally posted by xoggoth View Post

PPS I used a raspberry as I couldn't find a chimpanzee.

In my experience most things work best with chimps, but orang-utans are also good

Safari Canvas problem