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>
  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();
  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