All Articles

Draw images on canvas

1. Background image

    canvasJS = document.getElementById('canvas');
    context = canvasJS.getContext('2d');
    document.getElementById("canvas").style.background = "url('images/bg.png')";

2. Draw image sprites

    var heroImage = new Image();
    heroImage.src="images/hero.png";

    console.log("end");


    var sprites = {};

    sprites["center"] = {
        x: 0,
        y: 0,
        w: 90,
        h: 90
    };

    sprites["back"] = {
        x: 90,
        y: 0,
        w: 90,
        h: 90
    }

    sprites.draw=function(spritename,x,y){
        var sprite=this[spritename];
        ctx.drawImage(this.spritesheet,
            sprite.x,sprite.y,sprite.w,sprite.h,  // this clips the sprite!
            x,y,sprite.w,sprite.h
        );
    }