HTML Canvas fillStyle Property set hex color value

Description

HTML Canvas fillStyle Property set hex color value

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="canvasOne" width="640" height="480" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    let theCanvas = document.getElementById("canvasOne");
    let context = theCanvas.getContext("2d"); 

    /*from  w w w .ja  va2s . c o m*/
      function drawScreen() {
      //background
      context.fillStyle = "#ffffaa";
        context.fillRect(0, 0, 500, 300);
      
      //text
      context.fillStyle    = "#000000";
      context.font         = "20px Sans-Serif";
      context.textBaseline = "top";
      context.fillText  ("Hello World!", 195, 80 );
      
      //image
      let helloWorldImage = new Image();
      
      helloWorldImage.onload = function () {
        context.drawImage(helloWorldImage, 155, 110);
      }
      helloWorldImage.src = "image1.png";
      //box
      
      context.strokeStyle = "#000000"; 
      context.strokeRect(5,  5, 490, 290);
      
    }
    
    drawScreen();

</script>

</body>
</html>



PreviousNext

Related