загрузка картинки и вывод на канве <canvas>

[megaLux]

всем привет
надо загрузить картинку gfx.png, которая находится в той же папке что и html и вывести на канве

создаю объект <canvas>:

<canvas id="canvas" width="1200" height="200"></canvas>
<script>

var doc = document.getElementById("canvas")
var ctx = doc.getContext("2d")

img = document.createElement('img')
img.src = 'gfx.png'

</script>

браузер ничего не выводит
подскажите где ошибка?

[Rise]

megaLux,
Canvas tutorial

[voraa]

Так надо еще эту картинку на канву вывести

var doc = document.getElementById("canvas");
var ctx = doc.getContext("2d");
img = document.createElement('img');
img.src = 'gfx.png';
img.decode().then (() => ctx.drawImage(img, 0,0));

У drawImage есть разные формы вызова, с разными параметрами.
Какие нужны, см тут
https://developer.mozilla.org/ru/doc...xt2D/drawImage