To Examples

Canvas Example

Directions

1. Create a new Rails project named Canvas.
2. Generate a controller named Drawing with a view named page1.
3. Add these lines to the top of Canvas/Gemfile immediately after source 'https://rubygems.org':
   

   # Force CoffeeScript to 1.8.0.
   gem 'coffee-script-source', '1.8.0'
   

   We can't delete the javascript_include_tag line as we did in the other HTML/CSS examples because we will be using JavaScript.
4. Enter the following line in the Command Prompt Window:
   

   bundle update coffee-script-source
   

5. Source code for Canvas/app/views/drawing/page1.html.erb:
   

   <h1>Canvas Example</h1>
   
   <canvas id="myCanvas" onclick="draw( )">
      Browser does not support the HTML5 canvas tag.
   </canvas>

6. Source code for Canvas/app/assets/stylesheets/drawing.scss:
   

   h1 { font-family: Verdana; }
   
   #myCanvas { width: 500px;
               height: 500px;
               border: 1px solid #000000; }

7. To the JavaScript file Canvas/app/assets/javascripts/application.js, add this source code:
   

   draw = function( ) {
      c = document.getElementById("myCanvas");
      ctx = c.getContext("2d");
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(20,50,150,75);
      ctx.beginPath( );
      ctx.arc(95, 50, 40, 0, 2 * Math.PI);
      ctx.stroke( );
      ctx.font = "20px Arial";
      ctx.fillText("JavaScript Art", 150, 20);
   }

8. View page1 with this URL:
   

   http://localhost:3000/drawing/page1