Отрисовка картинок в canvas

100
14 мая 2021, 01:00

Я хочу сделать,чтобы функцию draw можно было бы применять много раз с разными картинками, но у меня почему-то не выходит. Может это особенности canvas. Можно ли что-нибудь с этим сделать?

    let canvas = document.getElementById('field'); 
    let ctx = canvas.getContext('2d'); 
    let cat = new Image(); 
    let dog = new Image(); 
    cat.src = 'http://mignews.com/aimages/04_16/150416_221507_60345_2.jpg'; 
    dog.src = 'http://petsblog.ru/wp-content/uploads/2018/02/shcenochek-600x330.jpg'; 
    function draw(img) { 
        ctx.drawImage(img, 0, 0); 
    } 
    draw(cat); 
    draw(dog);
<canvas id="field" width="900" height="400">hi</canvas>

Answer 1

Нужно дождаться загрузки картинки, установив обработчик onload

let canvas = document.getElementById('field'); 
let ctx = canvas.getContext('2d'); 
let cat = new Image(); 
let dog = new Image(); 
cat.src = 'https://picsum.photos/id/102/300/200'; 
dog.src = 'https://picsum.photos/id/103/300/200'; 
cat.onload = () => ctx.drawImage(cat, 0, 0, cat.width, cat.height); 
dog.onload = () => ctx.drawImage(dog, 300, 0, dog.width, dog.height);
<canvas id="field" width="600" height="175"></canvas>

READ ALSO
Почему не работает рекурсия?
javascript

Почему не работает рекурсия?

 211
window.width() 1730. хотя браузер развернут в fullscreen
javascript

window.width() 1730. хотя браузер развернут в fullscreen

консоль выдает 1730 ширину окна браузера в фулл скринеscreen

 101
WebSQL. Insert в цикле FOR или WHILE
javascript

WebSQL. Insert в цикле FOR или WHILE

Не могу разобраться, как заставить исполняться транзакцию каждый раз в цикле, а не только последнийКод специально упростил

 153
Как написать регулярное выражение для удаления миллисекунд в формате ISO
javascript

Как написать регулярное выражение для удаления миллисекунд в формате ISO

У меня есть дата в iso формате 2019-08-04T23:01:02447Z Как написать регуляное выражение для удаления миллисекунд, что бы получилась строка такого типа...

 92