HTML5 Canvas Modify Curves with Anchor Points Using KineticJS

Posted on January 7th, 2012 by Eric Rowell

Instructions: Use your mouse or finger and drag and drop the anchor points to modify the curvature of the quadratic curve and the Bezier curve. Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.5.js"></script>
    <script>
      function updateDottedLines(layer) {
        var q = layer.quad;
        var b = layer.bezier;

var quadLine = layer.get('#quadLine')[0];
        var bezierLine = layer.get('#bezierLine')[0];

quadLine.setPoints([
          q.start.attrs.x, q.start.attrs.y, 
          q.control.attrs.x, q.control.attrs.y, 
          q.end.attrs.x, q.end.attrs.y
        ]);

bezierLine.setPoints([
          b.start.attrs.x, b.start.attrs.y, 
          b.control1.attrs.x, b.control1.attrs.y, 
          b.control2.attrs.x, b.control2.attrs.y, 
          b.end.attrs.x, b.end.attrs.y
        ]);
      }
      function buildAnchor(layer, x, y, anchor) {
        var anchor = new Kinetic.Circle({
          x: x,
          y: y,
          radius: 8,
          stroke: "#666",
          fill: "#ddd",
          strokeWidth: 2,
          draggable: true
        });

// add hover styling
        anchor.on("mouseover", function() {
          document.body.style.cursor = "pointer";
          this.setStrokeWidth(4);
          layer.draw();
        });
        anchor.on("mouseout", function() {
          document.body.style.cursor = "default";
          this.setStrokeWidth(2);
          layer.draw();
        });

layer.add(anchor);
        return anchor;
      }
      function drawCurves() {
        var context = this.getContext();
        var layer = this.getLayer();

///////////////////////////////
        // draw quad
        ///////////////////////////////
        var quad = layer.quad;
        var bezier = layer.bezier;

// draw quad
        context.beginPath();
        context.moveTo(quad.start.attrs.x, quad.start.attrs.y);
        context.quadraticCurveTo(quad.control.attrs.x, quad.control.attrs.y, quad.end.attrs.x, quad.end.attrs.y);
        context.strokeStyle = "red";
        context.lineWidth = 4;
        context.stroke();

// draw bezier
        context.beginPath();
        context.moveTo(bezier.start.attrs.x, bezier.start.attrs.y);
        context.bezierCurveTo(bezier.control1.attrs.x, bezier.control1.attrs.y, bezier.control2.attrs.x, bezier.control2.attrs.y, bezier.end.attrs.x, bezier.end.attrs.y);
        context.strokeStyle = "blue";
        context.lineWidth = 4;
        context.stroke();
      }

window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });

var layer = new Kinetic.Layer({
          drawFunc: drawCurves
        });

var quadLine = new Kinetic.Line({
          dashArray: [10, 10, 0, 10],
          strokeWidth: 3,
          stroke: "black",
          lineCap: "round",
          id: "quadLine",
          alpha: 0.3
        });

var bezierLine = new Kinetic.Line({
          dashArray: [10, 10, 0, 10],
          strokeWidth: 3,
          stroke: "black",
          lineCap: "round",
          id: "bezierLine",
          alpha: 0.3
        });

// add dotted line connectors
        layer.add(quadLine);
        layer.add(bezierLine);

/*
         * update the dotted line points before
         * drawing the layer
         */
        layer.beforeDraw(function() {
          updateDottedLines(layer);
        });
        /*
         * add custom property curve objects to layer so that
         * they can be modified by reference
         */
        layer.quad = {
          start: buildAnchor(layer, 60, 30),
          control: buildAnchor(layer, 240, 110),
          end: buildAnchor(layer, 80, 160)
        };

layer.bezier = {
          start: buildAnchor(layer, 280, 20),
          control1: buildAnchor(layer, 530, 40),
          control2: buildAnchor(layer, 480, 150),
          end: buildAnchor(layer, 300, 150)
        };

stage.on("mouseout", function() {
          layer.draw();
        });

stage.add(layer);
      };

</script>
  </head>
  <body onmousedown="return false;">
    <div id="container"></div>
  </body>
</html>

More Examples

Follow @ericdrowell

Top 10 Labs

Oleg says:

January 10, 2012 at 4:08 pm

Looks really cool, great job!

January 11, 2012 at 3:30 am

@Eric, how can I move shape to background layer?

Inn says:

January 12, 2012 at 2:38 am

Add excanvas for ie9-

Eric Rowell says:

January 13, 2012 at 1:07 am

@Oleg I posted your question with the answer on the KineticJS Forum here:

http://kineticjs.com/forum/viewtopic.php?f=5&t=8

January 13, 2012 at 1:16 am

@Inn IE9 fully supports the 2d context so excanvas shouldn’t be needed.

Monski says:

February 23, 2012 at 11:20 pm

Can i apply it also on text? to curve?

yoh says:

February 26, 2012 at 7:21 pm

Hi, follow up on monski’s post. is there a way to curve a text?? we really need that functionality. thanks

February 27, 2012 at 9:01 pm

it’s absolutely possible, but certainly not trivial. I’ve avoided creating a tutorial that shows placing text along an arbitrary curve because the return on investment would be fairly low (very complex work, and not a lot of people need this).

Have you checked out my tutorial on drawing text along an arc? The approach would be very similar except that you’d have to calculate the tangent angle at each point (for a circle, the tangent is always 90 degrees from the center

http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/

February 27, 2012 at 11:39 pm

thanks :D

Kevin says:

March 31, 2012 at 1:54 pm

This looks like the wrong source code… Is it the “modify shape color on click code?” I’d love to see the code for this. Very nice library btw. =) Thanks in advance!

March 31, 2012 at 4:00 pm

@Kevin whoops sorry about this! Made a mistake when updating this lab. Fixed now :)

Marc says:

April 2, 2012 at 2:54 am

Hi,

Can a layer have points like a polygon? So I could add an event on the layer like mouseout but for a specific area only. Because Stage contains the whole area and I need to bind it on a specific area.

HPH says:

April 2, 2012 at 10:22 am

Hallo Eric, is their a possibility to have a type of curve with 3 anchor points?

April 3, 2012 at 5:21 pm

@Marc I’m not quite sure that makes sense – layers contain shapes, and shapes are the visual components of your canvas app. You can however, add event listeners to layers, but these listeners are applied to all of it’s children.

If you want mouse functionality for a specific area, you might try creating an invisible polygon (just don’t set the fill property)

Cheers!

April 3, 2012 at 5:22 pm

@HPH sure, you would just need to combine three quadratic curves together

April 3, 2012 at 6:14 pm

How connect them constrain?

April 3, 2012 at 10:03 pm

Hypercurve
Please have a look to
http://processingjs.nihongoresources.com/bezierinfo/