Mettre une image en fond dans un canvas sous HTML5


Pour mettre une image de fond ("background image") dans un canvas sous HTML5
il existe plusieurs solutions le plus simple est d'utiliser l'attribut background: url(image.png) dans la balise canvas. Illustration:

Mettre une image en fond dans un canvas sous HTML5

<!DOCTYPE html>
<html>
<body>

<canvas id="tools_sketch" width="512" height="512" 
        style="background: url(lena.png) no-repeat center center; 
        border:10px solid #000000;">
</canvas>

</body>
</html>

on peut aussi passer par javascript pour tracer l'image de fond.

Recherches associées

Image

of