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
\$\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\$
  • \$\begingroup\$ I don't know why that works, when I have it set in css as well, but it does! \$\endgroup\$ – tidelake Feb 16 '16 at 21:33
  • 1
    \$\begingroup\$ If you don't clarify the size of the canvas, it defaults to (300, 150) \$\endgroup\$ – ChrisUC Feb 16 '16 at 21:39
  • \$\begingroup\$ Ah, thank you. I'm surprised it cannot tell from the css. \$\endgroup\$ – tidelake Feb 16 '16 at 21:40
  • \$\begingroup\$ See stackoverflow.com/a/15794770/5912930 for more info \$\endgroup\$ – ChrisUC Feb 16 '16 at 21:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.