Try it Yourself: Canvas Images

Canvas Images

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');

const logo = new Image();
logo.src = 'assets/logo.png';

// drawImage() must not run until the browser has decoded pixel data
logo.onload = () => {
  ctx.drawImage(logo, 20, 20);
};
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');

const logo = new Image();
logo.src = 'assets/logo.png';

// drawImage() must not run until the browser has decoded pixel data
logo.onload = () => {
  ctx.drawImage(logo, 20, 20);
};
</script>

</body>
</html>