Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <body>
- <canvas id="myCanvas" width="2000" height="1200" style="border:1px solid #d3d3d3;">
- Your browser does not support the HTML5 canvas tag.</canvas>
- <script>
- var c = document.getElementById("myCanvas");
- var ctx = c.getContext("2d");
- // Red rectangle
- ctx.beginPath();
- ctx.lineWidth = "6";
- ctx.strokeStyle = "red";
- ctx.rect(5, 180, 190, 140);
- ctx.stroke();
- // Green rectangle
- ctx.beginPath();
- ctx.moveTo( 2100, 100 );
- ctx.lineWidth = "4";
- ctx.strokeStyle = "green";
- ctx.rect(50, 100, 50, 70);
- ctx.stroke();
- // Blue rectangle
- ctx.beginPath();
- ctx.moveTo( 190, 140 );
- ctx.lineWidth = "10";
- ctx.strokeStyle = "blue";
- ctx.rect(5, 10, 150, 80);
- ctx.stroke();
- // Fill with yello
- ctx.fillStyle = "yellow";
- ctx.fillRect(250,10,55,60);
- // Fill with purple
- ctx.fillStyle = "purple";
- ctx.fillRect(250,150,100,40);
- // Fill with yello
- ctx.fillStyle = "gray";
- ctx.fillRect(250,200,345,80);
- ctx.fillStyle = "black";
- ctx.font = "30px Arial";
- ctx.fillText("Zadanie 2", 10, 350);
- ctx.beginPath();
- ctx.moveTo(75, 400);
- ctx.lineTo(100, 425);
- ctx.lineTo(100, 375);
- ctx.fill();
- ctx.beginPath();
- ctx.moveTo(175, 400);
- ctx.lineTo(200, 440);
- ctx.lineTo(100, 475);
- ctx.fill();
- ctx.fillText("Zadanie 3", 10, 550);
- // Red rectangle
- ctx.beginPath();
- ctx.lineWidth = "6";
- ctx.fillStyle = "red";
- ctx.fillRect(50, 560, 200, 200);
- ctx.clearRect(50, 560, 30, 30);
- ctx.clearRect(220, 560, 30, 30);
- ctx.clearRect(50, 730, 30, 30);
- ctx.clearRect(220, 730, 30, 30);
- ctx.stroke();
- ctx.fillStyle = "black";
- ctx.fillText("Zadanie 4", 10,800);
- ctx.beginPath();
- ctx.arc(95, 850, 40, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.beginPath();
- ctx.arc(95, 850, 40, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.beginPath();
- ctx.arc(195, 850, 40, 0, 1 * Math.PI);
- ctx.stroke();
- ctx.beginPath();
- ctx.arc(295, 850, 40, 0, 0.5 * Math.PI);
- ctx.stroke();
- ctx.fillStyle = "black";
- ctx.fillText("Zadanie 5", 10,950);
- ctx.beginPath();
- ctx.arc(95, 1000, 40, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.beginPath();
- ctx.arc(95+100, 1000, 40, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.beginPath();
- ctx.arc(95+200, 1000, 40, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.beginPath();
- ctx.arc(95+50, 1000+40, 40, 0, 2 * Math.PI);
- ctx.stroke();
- ctx.beginPath();
- ctx.arc(95+150, 1000+40, 40, 0, 2 * Math.PI);
- ctx.stroke();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement