<!DOCTYPE html> <html> <body> Pattern Canvas<br> <canvas id="patternCanvas" style="border: 1px solid black" width="10" height="10"></canvas><br> Main Canvas (red square should be in top-left corner)<br> <canvas id="canvas" style="border: 1px solid black" width="100" height="100"></canvas> <script> // Draw a 10x10 red rectangle that will be used for the pattern. const patternCanvas = document.getElementById("patternCanvas"); const patternCtx = patternCanvas.getContext("2d"); patternCtx.fillStyle = "red"; patternCtx.fillRect(0, 0, patternCanvas.width, patternCanvas.height); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const pattern = ctx.createPattern(patternCanvas, "no-repeat"); ctx.fillStyle = pattern; // Fill the entire canvas with the pattern. ctx.fillRect(0, 0, 100, 100); </script> </body> </html>