CODEWITHSUNDEEP
html5-canvas
ms ghotra
ms ghotra

Reputation: 59

HTML5 Canvas API

Below script is not drawing the complete image on canvas. Trying to draw 400 * 346 px image from the sprite.Tested with chrome, safari, mozilla

<html>
<head>
</head>
<body>
    <script type="text/javascript">    
    var canvas = null;
    function init() {
        var cvs = document.createElement("canvas");
        cvs.id = "myCanvas";
        var ctx = cvs.getContext('2d');
        var originX = 200;
        var originY = 173;
        document.body.appendChild(cvs);
        var img = new Image();
        img.onload = function () {
            var sourceX = 1200;
            var sourceY = 0;
            var sourceWidth = 400;
            var sourceHeight = 346;
            var destinationX = 0;
            var destinationY = 0;
            var destinationWidth = 400;
            var destinationHeight = 346;
            ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight,
                          destinationX, destinationY, destinationWidth, destinationHeight);
        };
        img.src = 'tiles.png';
    };

    init();
</script>
</body>

Kindly help.

Upvotes: 0

Views: 140

Answers (1)

AshleysBrain
AshleysBrain

Reputation: 22591

You don't assign the canvas a width or height. So it defaults to 300x150, which is smaller than your image, hence only part of the image is displayed.

Try adding something like cvs.width = 400; cvs.height = 346;

Upvotes: 2

Related Questions