Има няколко проблема в кода:

Брой 1

Първият е атрибутите на етикета. Всъщност не влияе на резултата, но правилният синтаксис е цяло число без px в края, тъй като ширината и височината за платно могат да използват само пиксели:

<canvas id="canvas1" height="500" width="500"></canvas>

Брой 2

Следващият проблем е, че се опитвате да зададете свойства само за четене на елемента на изображението:

var bg = new Image();
bg.src = "images/bg.png";
//bg.height = "100";      invalid
//bg.width = "100";       invalid

Всъщност не е необходимо да задавате размера на изображението; вие можете, ако абсолютно искате, като използвате този синтаксис (след това вземете действителния размер, като използвате naturalWidth / naturalHeight, ако трябва да имате нужда от тях по-късно - пълното изображение ще бъде заредено при всички случаи):

var bg = new Image(width, height);

Но можете просто да използвате ширина и височина с метода drawImage() (вижте по-долу).

Брой 3

Третият проблем е, че не позволявате на изображението да се зареди. Зареждането на изображения е асинхронно, така че трябва да добавите манипулатор onload:

var bg = new Image();
bg.onload = done;         /// wait for image to load, then call done()
bg.src = "images/bg.png";

function done() {
    c.drawImage(bg,0,0);
    /// continue here
}

По желание дефинирайте размера на дестинацията по следния начин:

function done() {
    c.drawImage(bg,0,0, width, height);  /// the size you want
    /// continue here
}

Ако искате да запълните платното, използвайте:

c.drawImage(bg,0,0, canvas.width, canvas.height);

Надявам се това да помогне!

Тъй като е върху платно, трябва да ги зададете във функцията drawimage

canvas = document.getElementById("canvas1");
c = canvas.getContext("2d");
var bg = new Image();
bg.src = "images/bg.png";
c.drawImage(bg,0,0, 100, 100);