Post
Ask Question

Modify Shape Color and Stroke Width in HTML5

HTML5 Canvas Modify Shape Color and set stroke width

 
In this article, you will learn about the implementation and use of an onclick event to modify the color of various figures and also see the implementation of stroke width on the mouseover event.
 
To fill a shape we can set the fill property when we instantiate a shape, or we can use the setFill() method.
 
To set a shape stroke and stroke width, we can set the stroke and strokeWidth properties when we instantiate a shape, or we can use the setStroke() and setStrokeWidth() methods.
 
First, we will create a triangle, circle, and pentagon with their borders. We will use the stoke(), to create the border. We will set the width of the border with strokeWidth and color of the border with strokeStyle.
 
For a triangle and a circle we will use the onclick event to change the color of the triangle and circle.
 
For the pentagon, we will use an onmouseovert event to change the color of the pentagon.
 
Example
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title></title>  
  7.     <style>  
  8.         body {  
  9.             margin: 0px;  
  10.             padding: 0px;  
  11.         }  
  12.         canvas {  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <div id="container"></div>  
  17.     <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.min.js"></script>  
  18.     <script>  
  19.         var stage = new Kinetic.Stage({  
  20.             container: 'container',  
  21.             width: 578,  
  22.             height: 200  
  23.         });  
  24.         var layer = new Kinetic.Layer();  
  25.    
  26.         var triangle = new Kinetic.RegularPolygon({  
  27.             x: 190,  
  28.             y: 120,  
  29.             sides: 3,  
  30.             radius: 80,  
  31.             fill: '#00D2FF',  
  32.             stroke: 'black',  
  33.             strokeWidth: 4  
  34.         });  
  35.         triangle.on('click', function () {  
  36.             var fill = this.getFill() == 'yellow' ? '#00D2FF' : 'yellow';  
  37.             this.setFill(fill);  
  38.             layer.draw();  
  39.         });  
  40.         layer.add(triangle);  
  41.         var circle = new Kinetic.Circle({  
  42.             x: 380,  
  43.             y: stage.getHeight() / 2,  
  44.             radius: 70,  
  45.             fill: 'red',  
  46.             stroke: 'black',  
  47.             strokeWidth: 4  
  48.         });  
  49.         circle.on('click', function () {  
  50.             var fill = this.getFill() == 'red' ? '#00d00f' : 'red';  
  51.             this.setFill(fill);  
  52.             layer.draw();  
  53.         });  
  54.         layer.add(circle);  
  55.         stage.add(layer);  
  56.         var pentagon = new Kinetic.RegularPolygon({  
  57.             x: stage.getWidth() / 2,  
  58.             y: stage.getHeight() / 2,  
  59.             sides: 5,  
  60.             radius: 70,  
  61.             fill: 'lightblue',  
  62.             stroke: 'black',  
  63.             strokeWidth: 3  
  64.         });  
  65.         pentagon.on('mouseover', function () {  
  66.             this.setStroke('blue');  
  67.             this.setStrokeWidth(20);  
  68.             layer.draw();  
  69.         });  
  70.         pentagon.on('mouseout', function () {  
  71.             this.setStroke('black');  
  72.             this.setStrokeWidth(4);  
  73.             layer.draw();  
  74.         });  
  75.         // add the shape to the layer  
  76.         layer.add(pentagon);  
  77.         // add the layer to the stage  
  78.         stage.add(layer);  
  79.     </script>  
  80. </body>  
  81. </html> 
Output
 
Originally we have  
 
color11.jpg
 
After the Onclick event the color of the triangle and circle change
 
color12.jpg
 
After the onMouseover event we finally get:
 
color13.jpg


Similar Articles