Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <body> <canvas id="patCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("patCanvas"); var ctx = canvas.getContext("2d"); // Create a small hidden canvas to use as a pattern var patternCanvas = document.createElement("canvas"); var pctx = patternCanvas.getContext("2d"); patternCanvas.width = 10; patternCanvas.height = 10; // Draw a small dot on the pattern canvas pctx.fillStyle = "#FF8C00"; pctx.fillRect(0, 0, 5, 5); // Create the pattern var pattern = ctx.createPattern(patternCanvas, "repeat"); // Set the fillStyle to the pattern and fill a large rectangle ctx.fillStyle = pattern; ctx.fillRect(20, 20, 260, 110); </script> </body> </html>
