Mettre une image en fond dans un canvas sous HTML5

Active 21 février 2015    /    Viewed 6008    /    Comments 0    /    Edit


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

Liens Site
How to set the background image of a html 5 canvas to .png image stackoverflow
HTML5 Canvas background image stackoverflow
HTML5 Canvas Image Tutorial stackoverflow
jsfiddle exemple jsfiddle
Using HTML5 canvas to make a generative background stackoverflow
HOW DO YOU DRAW AN IMAGE ON HTML5 CANVAS? williammalone
code w3schools
Resizing an image in an HTML5 canvas stackoverflow
HTML canvas getImageData() Method w3schools
HTML5 Canvas Image Size Tutorial html5canvastutorials
CSS background Property w3schools


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!