선과 채우기의 색상 지정하기

선을 그릴땐 strokeStyle 속성, 채우기를 할땐 fillStyle 속성을 사용하여
색상이나 스타일을 지정한다.

 

<script type="text/javascript">
var canvas          = document.getElementById("canvas13");
var context         = canvas.getContext("2d");
    context.strokeStyle = "#0033FF";    // 선에 색상 지정하기
    context.beginPath();
    context.rect(0, 0, 110, 60); 
    context.stroke();
    context.closePath();
 
    context.fillStyle   = "#FFCC00";    // 채우기에 색상 지정하기
    context.beginPath();
    context.fillRect(5, 5, 100, 50); 
    context.stroke();
    context.closePath();
 
    context.strokeStyle = "#FF0000";    // 선에 색상 지정하기
    context.beginPath();
    context.arc(30, 30, 20, 0, 2 * Math.PI, true);
    context.stroke();
    context.closePath();
 
    context.fillStyle   = "#FF0000";    // 채우기에 색상 지정하기
    context.beginPath();
    context.arc(80, 30, 20, 0, 2 * Math.PI, true);
    context.fill();
    context.closePath();
</script>​