HTML5 Game - Draw hidden image from dom to canvas

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Pattern

Description

Draw hidden image from dom to canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>Example</title>  
        <style>  
            canvas {border: thin solid black; margin: 4px}  
        </style>  
    </head>  
    <body>  
        <canvas id="canvas" width="500" height="140">  
            Your browser doesn't support the <code>canvas</code> element  
        </canvas>  
        <img id="banana" hidden src="http://java2s.com/style/download.png"/>  
        <script>  
            let ctx = document.getElementById("canvas").getContext("2d");  
            let imageElem = document.getElementById("banana");  
              //  ww w .java  2 s .  c om
            let pattern = ctx.createPattern(imageElem, "repeat");  
  
            ctx.fillStyle = pattern;  
            ctx.fillRect(0, 0, 500, 140);  
        </script>  
    </body>  
</html>

Related Topic