Blog

HTML5 Canvas - Mengatur Lebar dan Warna Garis pada Canvas HTML 5

 

HTML5 Canvas - Mengatur Lebar dan Warna Garis pada Canvas HTML 5

HTML 5     2 bulan yang lalu


Untuk menentukan lebar garis Canvas HTML5, kita dapat menggunakan properti lineWidth dari context canvas.

Untuk menetapkan warna garis Canvas HTML5, kita dapat menggunakan properti strokeStyle dari context canvas, yang dapat diatur ke string warna seperti merah, hijau, atau biru, nilai hex seperti # FF0000 atau # 555, atau nilai RGB seperti rgb (255, 0, 0).

Properti lineWidth harus diatur sebelum memanggil stroke().

<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(100, 150);
  context.lineTo(450, 50);
  context.lineWidth = 15;
  // set line color
  context.strokeStyle = '#ff0000';
  context.stroke();
</script>