1. Contracting
    1. General
      1. Brexit
    2. Business / Contracts
      1. Coronavirus Assistance
    3. Accounting / Legal
      1. Umbrella Companies
      2. HMRC Scheme Enquiries
      3. The Future of Contracting
      4. IR35 Reform
    4. Technical
    5. Welcome / FAQs
  2. Social
    1. Light Relief
    2. Social / Events
  • Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.
  • Want to receive the latest contracting news and advice straight to your inbox? Sign up to the ContractorUK newsletter here. Every sign up will also be entered into a draw to WIN £100 Amazon vouchers!

Reply to: Safari Canvas problem

Collapse

You are not logged in or you do not have permission to access this page. This could be due to one of several reasons:

  • You are not logged in. If you are already registered, fill in the form below to log in, or follow the "Sign Up" link to register a new account.
  • You may not have sufficient privileges to access this page. Are you trying to edit someone else's post, access administrative features or some other privileged system?
  • If you are trying to post, the administrator may have disabled your account, or it may be awaiting activation.

Previously on "Safari Canvas problem"

Collapse
  • NickFitz
    replied
    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

    Leave a comment:

  • xoggoth
    replied
    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.
    Last edited by xoggoth; 23 September 2009, 21:23.

    Leave a comment:

  • NickFitz
    replied
    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>

    Leave a comment:

  • NickFitz
    replied
    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?

    Leave a comment:

  • xoggoth
    replied
    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.
    Last edited by xoggoth; 23 September 2009, 10:21.

    Leave a comment:

  • xoggoth
    replied
    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!
    Last edited by xoggoth; 22 September 2009, 20:19.

    Leave a comment:

  • NickFitz
    replied
    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.

    Leave a comment:

  • xoggoth
    started a topic Safari Canvas problem

    Safari Canvas problem

    Bit obscure this but you lot have been really good at webby things so far.

    Got HTML:
    <canvas id="canvas" width="1152" height="864"></canvas>

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

    This draws the image properly on open in Firefox, Opera and Google Chrome. In Safari the screen initially comes up black and I only get the image if I refresh. Have checked that it is definitely going through the code on open.

    Any brill ideas? Ta.
    Tags: None

Advertisers

  1. Contracting
    1. General
      1. Brexit
    2. Business / Contracts
      1. Coronavirus Assistance
    3. Accounting / Legal
      1. Umbrella Companies
      2. HMRC Scheme Enquiries
      3. The Future of Contracting
      4. IR35 Reform
    4. Technical
    5. Welcome / FAQs
  2. Social
    1. Light Relief
    2. Social / Events
Working...
X