5 Replies Latest reply on Dec 4, 2014 3:58 PM by otherelse

    html5 canvas in Edge Animate

    Svenar

      Hi folks

       

      I came over an interesting website yesterday made by Caleb Evans (http://calebevans.me/projects/jcanvas/ ).  He has written an API for html5 canvas to use in Jquery.  I have tested it in edge, and it works well .  How to use it in edge:

       

      1. download the JS from his site.

      2. In Edge, select Add JS file from disk

      3. navigate to the file (named Jcanvas.min.js)

      4. After this, save the project  and quit EA.

      '4. Open the EA HTML file. 

      5. In the body part add this tag: 

       

      <canvas width='300' height='150'></canvas>

       

      6. then, in animate, add code like this:

       

      // Draw a circle

      $("canvas").drawArc({

        draggable: true,

        fillStyle: "green",

        x: 100, y: 100,

        radius: 50

      });

      // Draw a 90° arc

      $('canvas').drawArc({

        strokeStyle: '#000',

        strokeWidth: 5,

        x: 100, y: 100,

        radius: 50,

        // start and end angles in degrees

        start: 0, end: 90

       

      Nice isn't it?  For more examples see;  http://calebevans.me/projects/jcanvas/docs/

       

      Almost all of the html5 canvas commands are available

       

      Svein-Tore

        • 1. Re: html5 canvas in Edge Animate
          mikewirthart

          This is cool. Seems to work a little easier than EdgeHero. (Couldn't figure out the canvas class in edge. No good documentation on that part).

           

          How do you wrap the canvas inside of a div in edge? or is it just in html?

          • 2. Re: html5 canvas in Edge Animate
            Svenar Level 1

            Hi Mike!

             

            I have only been able to add the canvas in the html file from animate (so

            it must be done "manually" if you know what  I mean). Unfortunately no

            preview in animate.

             

            Svein-Tore

             

             

            2014-05-27 12:15 GMT+02:00 mikewirthart <forums_noreply@adobe.com>:

             

                html5 canvas in Edge Animate  created by mikewirthart<https://forums.adobe.com/people/mikewirthart>in *Edge

            Animate CC* - View the full discussion<https://forums.adobe.com/message/6411553#6411553>

             

            • 3. Re: html5 canvas in Edge Animate
              Xoco Level 3

              Is not possible to use HTML5 Canvas in Edge Animate without additional script and without to manipulate .html file?

               

              Edit: Yes Canvas image

              • 4. Re: html5 canvas in Edge Animate
                Svenar Level 1

                Hi Xoco!

                 

                When you load  he Jcanvas file, in edge, you have the script you need to use HTML5 canvas like commands in edge. THis is what I have in the code windi\ow in edge:

                // Draw a circle

                $("canvas").drawArc({

                  draggable: true,

                  fillStyle: "green",

                  x: 100, y: 100,

                  radius: 50

                });

                In HTML5 it looks something like this:

                 

                var c=document.getElementById("myCanvas");

                var ctx=c.getContext("2d");

                ctx.beginPath();

                ctx.arc(100,75,50,0,2*Math.PI);

                ctx.stroke();


                This code will NOT work in EDGE.  More details on jCanvas | jQuery meets the HTML5 canvas


                And you must add the following in the HTML file that EDGE create:


                <canvas width='300' height='150'></canvas>


                Unortunately there will be noe preview in the EdGE's stage, so using this togethe with EDGE drawing commands is not so easy,.


                Svein-Tore

                • 5. Re: html5 canvas in Edge Animate
                  otherelse

                  Dear Svein

                   

                  I am trying my very very preliminary steps in this territory (coming from basic knowledge of actionscript)

                   

                  I only know that jQuery is a javascript library. That is all I know. Have no clue yet on how  to access its resources.

                   

                  So would you kindly type back to me, please, explaining exactly what I have to do in order to use jcanvas within Edge

                   

                  I have exchanged a couple of email with Caleb Evans -- his file was not downloading properly, so he fixed some bug in his site

                   

                  I had some difficulty finding out how to "Add JS file from disk". I originally tried to find how to do it via the Edge "File" menu option -- but I now know it has to be done via Scripts under Library

                   

                  Then I performed the following steps:

                  3. navigate to the file (named Jcanvas.min.js)

                  4. After this, save the project  and quit EA.

                  '4. Open the EA HTML file.

                  5. In the body part add this tag:  <canvas width='300' height='150'></canvas>

                   

                  But the code does not perform. What am I missing? I suspect I have to establish some "link" to jQuery -- have no idea how this should be done

                   

                  Would you PLEASE tell me what I have to do

                   

                  thanks