CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Murad Elboudy
Murad Elboudy

Reputation: 483

how to change color of strokes in literally canvas

I'm using the Literally Canvas widget and I want to make an onclick function that when triggered will change the color (strokeStyle) of what has already been drawn in the canvas element. I tried using:

lc.ctx.canvas.strokeStyle="red";
lc.ctx.canvas.style.strokeStyle="red";
lc.ctx.strokeStyle = "red";

There are tons of other objects and properties and I tried many more but I can't seem to get anywhere close, am I even in the right direction?. The only thing I tried that some how worked was using lc.colors.primary = "red";. It changed my stroking color to red but didn't change what has already been drawn, meaning I trigger the function and draw and the strokes are red but what has already been drawn stays black as it is.

Upvotes: 1

Views: 812

Answers (1)

gus27
gus27

Reputation: 2656

With Literally Canvas you can change the style of the shapes that are placed on the canvas.

You can access the shapes array by lc.shapes, grab an element and change it's color and afterwards call repaintAllLayers(). The repaintAllLayers() method is important to redraw the changes on to the canvas.

Unforunately the color properties are different for each kind of shape. Rectangles and circle use strokeColor, lines use color and for Pencil lines you have to change the color property of it's smoothedPoints. There may be other shapes with different color properties. So keep this as a starter.

Below you can find a snippet which demonstrates the behaviour. Because I haven't found a CDN for literallycanvas it is not working completely - you can only draw a line, then press the "Test" button and the line will appear in red.

var lc = null;

function test() {
   for (var i=0; i<lc.shapes.length; i++) {
      if (lc.shapes[i].hasOwnProperty('smoothedPoints')) {
          // Pencil shapes
          for (var j=0; j<lc.shapes[i].smoothedPoints.length; j++) {
              lc.shapes[i].smoothedPoints[j].color = "red";
          }
      } else if (lc.shapes[i].hasOwnProperty('strokeColor')) {
          lc.shapes[i].strokeColor = "red";
      } else {
          // line shape
          lc.shapes[i].color = "red";
     }
   }
   lc.repaintAllLayers();
}

$(document).ready(function() {
    lc = LC.init(
      document.getElementsByClassName('literally')[0]);
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script>
<link href="http://literallycanvas.com/_static/lib/css/literallycanvas.css" rel="stylesheet"/>
<script src="http://literallycanvas.com/_static/lib/js/literallycanvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Draw a line, then press "Test" button
<button onclick="test()">Test</button>
<div class="literally"></div>

Upvotes: 2

Related Questions