3 Replies Latest reply on Aug 14, 2017 11:49 AM by ClayUUID

    Interactive colouring page for html5 Canvas?

    mercedesc43970157

      Hi,

       

       

      I would like to be able to make a simple interactive coloring activity on Animate html canvas, and I could not find any tutorial that deals with this topic.

       

      My beloved code in AS2 was based on areas to fill that were buttons with AS:

       

       

      on(release){
      iColor = new Color (this);

      iColor.setRGB(_root.fillColor);

      delete iColor;

      }

       

      And in a palette where each color is also a button with AS:

      on(realease){

      fillColor = (the HexCode for that color);

      }

       

       

      I honestly have no idea how to translate this to javascript.

       

       

      If anyone can help me I will be very grateful, regards.

       

        • 1. Re: Interactive colouring page for html5 Canvas?
          ClayUUID Adobe Community Professional

          RGB filters are very slow in HTML because the canvas element doesn't natively support them, so they have to be emulated in JavaScript. You'd be best off using the drawing API to redraw each colored region from scratch in the requested color.

           

          Canvas mode uses CreateJS, which comprises a set of multimedia APIs. All drawing functions are in EaselJS.

          EaselJS v0.8.2 API Documentation : EaselJS

          • 2. Re: Interactive colouring page for html5 Canvas?
            mercedesc43970157 Level 1

            Thanks for your answer

            Could you refer me some link where I can see something like that in the context of animate cc?

            • 3. Re: Interactive colouring page for html5 Canvas?
              ClayUUID Adobe Community Professional

              You just need a container object on the stage that you can attach a new Shape object to. The shape is defined programmatically using the EaselJS graphics API.

               

              For example, where the stage has a movieclip named "myContainer":

              // intialize shape

              var myShape = new createjs.Shape(); // create a shape to draw in

              this.myContainer.addChild(myShape); // attach the shape to a stage object

               

              // define shape

              var myPoints = [[0,0], [40, 100], [-20, 80]];

              var myStrokeColor = "#0000FF";

              var myFillColor = "orange";

              var myStrokeWidth = 2;

               

              // draw shape

              var i;

              var msg = myShape.graphics; // shortcut to the shape's graphics methods

              msg.clear();

              msg.setStrokeStyle(myStrokeWidth);

              msg.beginStroke(myStrokeColor);

              msg.beginFill(myFillColor);

              for (i = 0; i < myPoints.length; i++) {

                  msg.lineTo(myPoints[i][0], myPoints[i][1]);

              }

              msg.closePath();

              msg.endStroke();

              msg.endFill();

               

              That drawing code at the end can be compacted somewhat by chaining multiple graphics API calls together, like so:

               

              // draw shape

              var i;

              var msg = myShape.graphics; // shortcut to the shape's graphics methods

              msg.clear().setStrokeStyle(myStrokeWidth).beginStroke(myStrokeColor).beginFill(myFillColor );

              for (i = 0; i < myPoints.length; i++) {

                  msg.lineTo(myPoints[i][0], myPoints[i][1]);

              }

              msg.closePath().endStroke().endFill();

               

               

              EaselJS v0.8.2 API Documentation : Graphics