Codingku change

Belajar Element HTML: <canvas>

Tag <canvas> digunakan untuk membuat grafis didalam dokumen HTML.

Tag ini bisa merender grafis, grafis permainan, teks unik, atau gambar lainnya.

Dan tag ini sendiri merender canvas kosong sebagai container.

Untuk menggambar di canvas, tag <canvas> dibantu oleh Javascript dengan method getContext().

Syntax

Tag <canvas> ditulis seperti <canvas id=""></canvas> dengan konten diletakkan diantara tag pembuka dan penutup.

Kamu juga bisa mengatur tinggi dan lebar canvas menggunakan atribut height dan width.

Jika kamu tidak menggunakan atribut tersebut, maka canvas akan dirender sesuai dengan ukuran default yaitu lebarnya 300 dan tingginya 150.

<canvas id="myCanvas">
Fallback content...
</canvas>

<script>
function displayCanvas()
	{
      var canvas = document.getElementById("myCanvas");
...
</script>

Contoh Canvas Persegi

<canvas id="Rectangles" width="300" height="200">
<p>Your browser does not support the canvas tag.</p> 
<p>Here's an <a href="/pix/html_5/tags/html_canvas_tag.gif">image of what it's supposed to look like</a>.</p>
</canvas>
<script>
var canvasRect = document.getElementById("Rectangles");
if (canvasRect.getContext) {
  var ctxRect = canvasRect.getContext("2d");

  ctxRect.fillStyle = "rgb(200,0,0)";
  ctxRect.fillRect (0, 0, 150, 75);

  ctxRect.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctxRect.fillRect (40, 30, 125, 75);

  ctxRect.fillStyle = "rgb(0,0,150)";
  ctxRect.strokeRect (20, 20, 50, 100); 
}
</script>

Contoh Bezier Curves

<canvas id="Path"><p>Your browser does not support the canvas tag.</p></canvas>
<script>
var canvasPath = document.getElementById("Path");
if (canvasPath.getContext) {
	var ctxPath = canvasPath.getContext("2d");

	ctxPath.beginPath();
	ctxPath.moveTo(150, 130);
	ctxPath.bezierCurveTo(90, 100, 40, 75, 160, 15);
	ctxPath.bezierCurveTo(130, 50, 110, 75, 150, 130);
	
	ctxPath.closePath();
	ctxPath.lineWidth = 1;
	ctxPath.strokeStyle = '#f90';
	ctxPath.stroke(); 
}
</script>

Contoh Teks

<canvas id="Text"><p>Your browser does not support the canvas tag.</p></canvas>
<script>
var canvasText = document.getElementById("Text");
if (canvasText.getContext) {
	var ctxText = canvasText.getContext("2d");
	var text = 'Canvas';
	ctxText.font = '60pt Cursive';
	ctxText.fillStyle = '#fc0';
	ctxText.strokeStyle = '#f90';
	ctxText.fillText(text, 3, 62);
	ctxText.strokeText(text, 1, 60);
 }
</script>

Canvas dengan Gambar

<canvas id="Image"><p>Your browser does not support the canvas tag.</p></canvas>
<script>
var canvasImage = document.getElementById("Image");
if (canvasImage.getContext) {
	var ctxImage = canvasImage.getContext('2d');
	var imageObj = new Image();
	
	imageObj.onload = function() {
	  ctxImage.drawImage(imageObj, 10, 10);
	};
	imageObj.src = '/images/html/phi-phi-200x150.png';
 }
</script>

Atribut Canvas

height

Menentukan tinggi canvas.

"50"

Defaultnya 150.

width

Menentukan lebar canvas.

"200"

Defaultnya 100.

Pengaturan Default CSS

Sebagian besar browser akan menampilkan elemen canvas dengan default CSS berikut:

canvas {
  height: 150px;
  width: 300px;
}