6 people following this project (follow)

Project Description
A basic HTML 5 canvas drawing library for those familiar with the java.awt.Graphics class in Java. It also comes with a JavaScript implementation of the game Breakout to demonstrate using the library.

Various utility methods will be added to this library over time to abstract away the low-level drawing methods found in HTML 5 canvas. Feel free to make requests to improve this library.

See here for my diagramming tool built using this library.


Breakout Demo Included
breakaway.png


Sample Usage
<!DOCTYPE html>
<html>
<head>
   <title>Canvas Toolkit Demo</title>
   <script type="text/javascript" src="canvastoolkit-1.0.0.js"></script>
   <script type="text/javascript">
      function drawShapes() {
         var g = new ctk.Graphics(document.getElementById("myCanvas"));
         
         // Draw a filled blue rectangle
         g.setColor("#0000ff");
         g.fillRect(10, 10, 40, 20);

         // Draw filled a black circle (face outline)
         g.setColor("#000000");
         g.fillCircle(128, 98, 42);

         // Draw filled a yellow circle (face)
         g.setColor("#ffff00");
         g.fillCircle(130, 100, 40);

         // Draw two unfilled a black circles (eyes)
         g.setStrokeColor("#000000");
         g.drawCircle(155, 120, 5);
         g.drawCircle(180, 120, 5);
         
         // Draw a black line (mouth)
         g.setStrokeColor("#000000");
         g.drawLine(150, 155, 190, 155);
      }
   </script>
</head>
<body onload="drawShapes();">
   <canvas id="myCanvas" width="400" height="300" style="background-color: #ffffff; border: solid 1px #000000;"></canvas>
</body>
</html>

sample-simple.png

Last edited Dec 8 2011 at 5:06 AM by TonyO, version 11