แอตทริบิวต์ width ขององค์ประกอบ
<canvas width="pixels_val">
ด้านบน pixels_val คือความกว้างที่กำหนดเป็นพิกเซล ให้เราดูตัวอย่างการใช้แอตทริบิวต์ width ขององค์ประกอบ
ตัวอย่าง
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="400" height="200" style="border:3px dashed yellow"> HTML5 canvas tag isn't supported by your browser. </canvas> <script> var c = document.getElementById("newCanvas"); var context = c.getContext("2d"); context.fillStyle = "#FF5655"; context.fillRect(100, 50, 60, 100); </script> </body> </html>
ผลลัพธ์
ในตัวอย่างข้างต้น เราได้สร้างแคนวาสและใช้ JavaScript -
<script> var c = document.getElementById("newCanvas"); var context = c.getContext("2d"); context.fillStyle = "#FF5655"; context.fillRect(100, 50, 60, 100); </script>
ก่อนหน้านั้นเราได้ตั้งค่าผ้าใบ id ด้วยความกว้างและความสูง -
<canvas id="newCanvas" width="400" height="200" style="border:3px dashed yellow"> HTML5 canvas tag isn't supported by your browser. </canvas>