0
\$\begingroup\$

For the following page source, I've finally gotten a grip on rendering the cards. I'm puzzled why they appear about 2.5x larger on the canvas.

enter image description here

<html>
  <head>
    <style>
      canvas#game-canvas {
        position: absolute;
        top: 5%;
        left: 5%;
        background: lightblue;
        height: 281px;
        width: 500px;
      }
      body {
        background: darkblue;
      }    
    </style>
    <script type="text/javascript" src="jquery1_10_2_min.js"></script>
    <script>
    // $(document).ready(function() {
      window.onload = function() {
      var canvas = document.getElementById("game-canvas");
      var context = canvas.getContext("2d");

      var cards = cardsheet('small_playing_cards.png', 50, 68);
      context.drawImage(cards[0], 10, 10);
      context.drawImage(cards[1], 50, 50);

      function cardsheet(path, frameWidth, frameHeight) {

         this.image = new Image();
         this.frameHeight = frameHeight;
         this.frameWidth = frameWidth;
         this.image.src = path;

         var card_sprites_canvas = [];
         var card_sprites_context = [];
         var card_names = [
         '1d', '2d', '3d', '4d', '5d', '6d', '7d', '8d', '9d', '10d', 'Jd', 'Qd', 'Kd',  
         '1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', 'Jh', 'Qh', 'Kh',
         '1s', '2s', '3s', '4s', '5s', '6s', '7s', '8s', '9s', '10s', 'Js', 'Qs', 'Ks',
         '1c', '2c', '3c', '4c', '5c', '6c', '7c', '8c', '9c', '10c', 'Jc', 'Qc', 'Kc'];  

            framesPerRow = Math.floor(this.image.width / frameWidth);
            framesPerCol = Math.floor(this.image.height / frameHeight);
            k = 0;

            for (i = 0; i < framesPerRow; i++) {
              card_sprites_canvas[k] = document.createElement('canvas');
              card_sprites_canvas[k].width = frameWidth;
              card_sprites_canvas[k].height = frameHeight;
              card_sprites_context[k] = card_sprites_canvas[k].getContext('2d');
              card_sprites_context[k].drawImage(this.image, frameWidth * k, frameHeight * 0, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);      
              k++;
            }

        return card_sprites_canvas;
      }
    };

    </script>

  </head>
  <body>
    <canvas id="game-canvas"></canvas>
    <img src="small_playing_cards.png">
  </body>
</html>
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

You need to set the canvas size:

<body>
    <canvas id="game-canvas" width=500 height=281></canvas>
    <img src="small_playing_cards.png">
</body>
\$\endgroup\$
4
  • \$\begingroup\$ I don't know why that works, when I have it set in css as well, but it does! \$\endgroup\$ Feb 16, 2016 at 21:33
  • 2
    \$\begingroup\$ If you don't clarify the size of the canvas, it defaults to (300, 150) \$\endgroup\$
    – ChrisUC
    Feb 16, 2016 at 21:39
  • \$\begingroup\$ Ah, thank you. I'm surprised it cannot tell from the css. \$\endgroup\$ Feb 16, 2016 at 21:40
  • \$\begingroup\$ See stackoverflow.com/a/15794770/5912930 for more info \$\endgroup\$
    – ChrisUC
    Feb 16, 2016 at 21:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .