Pregled code-a:
<!DOCTYPE HTML> <html lang="hr"> <head> <meta charset="UTF-8"> <title>CANVAS - Image - Canvas</title> <script> var can1, ctx1, can2, ctx2; function crtaj() { //gornji canvas can1 = document.getElementById("kan1"); //moze ici i document.createElement('canvas'); ctx1 = can1.getContext('2d'); ctx1.strokeStyle="orange"; ctx1.moveTo(150,20); ctx1.lineTo(150,170); ctx1.stroke(); //donji canvas (kopija gornjeg) can2 = document.getElementById("kan2"); ctx2 = can2.getContext('2d'); ctx2.drawImage(can1, 50, 100); } window.onload=crtaj; </script> </head> <body> <canvas id="kan1" width="500" height="300" style="border:1px solid #AAAAAA;"> Vaš browser ne podržava CANVAS element! </canvas> <br>Učitavanje gornjeg canvasa (can1) u donji (can2). <br> <canvas id="kan2" width="500" height="300" style="border:1px solid #AAAAAA;background:#EEEEEE;"> Vaš browser ne podržava CANVAS element! </canvas> <br><br> </body> </html>
Pregled stranice:
Pogledaj stranicu
../html/html5canvas/primjeri/35img_canvas.html
.