В коде есть несколько проблем:

Выпуск 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);