Loading ...
Sorry, an error occurred while loading the content.

Re: second image getting cut-off in firefox

Expand Messages
  • Matthew Hagston
    Note: if i tell it to draw twice, like this ... ctx.drawImage(track.img,-19,-122); // draw track with offset, centered around startpoint
    Message 1 of 2 , Mar 16, 2007
    View Source
    • 0 Attachment
      Note: if i tell it to draw twice, like this ...

      ctx.drawImage(track.img,-19,-122); // draw track with offset,
      centered around startpoint
      ctx.drawImage(track.img,-19,-122); // draw track with offset,
      centered around startpoint


      ... it draws correctly. Is this a bug or am i doing something wrong here?

      --- In canvas-developers@yahoogroups.com, "Matthew Hagston"
      <matthew_hagston@...> wrote:
      >
      > It's drawing the first piece of track just fine, but when i go to draw
      > the second piece of track it only draws a small corner and doesn't
      > draw the whole image.
      >
      > It seems to draw only in the transparent space of the previous image.
      > if i remove the 'rotate' code, it draws just fine.
      >
      > *slams head into desk*
      >
      >
      >
      > Using mozilla firefox 2.0.0.2.
      >
      > image i'm trying to use is located here:
      > http://www.hungates.com/images/thomas_track_6.png
      >
      > any clues or hints to what's causing this?
      >
      > ---------------------Begin code clip------------------------
      > <HTML>
      > <HEAD>
      > <script type='text/javascript'>
      >
      > function Track() {
      > this.name = "";
      > this.img = new Image();
      > this.beginX1 = 0;
      > this.beginY1 = 0;
      > this.beginX2 = 0;
      > this.beginY2 = 0;
      > this.endX1 = 0;
      > this.endY1 = 0;
      > this.endX2 = 0;
      > this.endY2 = 0;
      > this.width = 0;
      > this.height = 0;
      > this.id = 0;
      > this.numEnds = 2; // default to 2 end points, max of 4 end points.
      > minimum of 1 (bumper track)
      >
      > }
      > </script>
      > <script type='text/javascript'>
      >
      > function init() {
      >
      > var ctx = document.getElementById('canvas').getContext('2d');
      > ctx.globalCompositeOperation = 'destination-over';
      >
      > track = new Track();
      > track.img.src = "images/thomas_track_6.png";
      > track.name = "6.5 in. Curve Track";
      > track.beginX1 = 19;
      > track.beginY1 = 122;
      > track.endX1 = 74;
      > track.endY1 = 8;
      > track.width = 81;
      > track.height = 132;
      >
      > ctx.clearRect(0,0,1000,625);
      > ctx.save();
      > ctx.translate(200,150); // Set Initial Starting Point of Track
      >
      > ctx.drawImage(track.img,0,0, 81, 132); // Draw 1st Curved Track
      Piece
      >
      > ctx.translate(73,8); // move to track endpoint
      > ctx.rotate(0.78525); // 0.78525 (45 degrees in radians)
      > ctx.drawImage(track.img,-19,-122, 81, 132); // draw track with
      > offset, centered around startpoint
      >
      > ctx.restore();
      >
      > }
      > </script>
      > </HEAD>
      > <BODY onload='init()' style='margin: 0px; background-color: #eee;'>
      >
      > <canvas id='canvas' width="1000px" height="625px"></canvas>
      >
      > </BODY>
      > </HTML>
      > ---------------------End code clip------------------------
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.