Drawing on canvas

DRAWING ON CANVAS

chapter 6

Javascript + canvas

- Drawing a Logo

- Graphing Statistics with RGraph

The Canvas Element

<canvas id="my_canvas" width="150" height="150">
Fallback content here
</canvas>

can't use css

var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
}else{

}

canvas_simple_drawing.html

var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
context.fillStyle = "rgb(200,0,0)";
context.fillRect (10, 10, 100, 100);
context.fillStyle = "rgb(0,0,200)";
context.fillRect (30, 30, 100, 100);
context.strokeStyle = "rgb(200,0,0)";
context.lineWidth = 2; context.beginPath(); context.moveTo
(0, 0); context.lineTo(100, 100); context.stroke(); context.
closePath();}........

Drawing the logo

string of text, an angeld path, a squeare, a triangle

Adding Text
c o n t e x t . f o n t = ' i t a l i c 4 0 p x s a n s - s e r i f ' ;
c o n t e x t . t e x t B a s e l i n e = ' t o p ' ;
c o n t e x t . f i l l T e x t ( ' A w e s o m e C o ' , 6 0 , 0 ) ;

Drawing the Logo

Drawing lines
   c o n t e x t . lineWidth=2;
   c o n t e x t . beginPath();
   c o n t e x t . moveTo(0,40);
   c o n t e x t . lineTo(30,0);
   c o n t e x t . stroke();
   c o n t e x t . c l o s e P a t h ( )

Drawing the Logo

Moving the Origin
   c o n t e x t . s a v e ( ) ;
   c o n t e x t . t r a n s l a t e ( 2 0 , 2 0 ) ;
   c o n t e x t . f i l l R e c t ( 0 , 0 , 2 0 , 2 0 ) ;

Drawing the Logo

Drawing a triangle
   c o n t e x t . f i l l S t y l e = ' # f f f '
   c o n t e x t . s t r o k e S t y l e = ' # f f f ' ;
   c o n t e x t . l i n e W i d t h = 2 ;
   c o n t e x t . b e g i n P a t h ( ) ;
   c o n t e x t . m o v e T o ( 0 , 2 0 ) ;
   c o n t e x t . l i n e T o ( 1 0 , 0 ) ;
   c o n t e x t . l i n e T o ( 2 0 , 2 0 ) ;
   c o n t e x t . l i n e T o ( 0 , 2 0 ) ;
   c o n t e x t . f i l l ( ) ;
   c o n t e x t . c l o s e P a t h ( ) ;
   c o n t e x t . r e s t o r e ( ) ;

Drawing the Logo

AddingColors
// context.fillStyle = "#f00";
// context.strokeStyle = "#f00";
var gradient = context.createLinearGradient(0, 0, 0, 40);
gradient.addColorStop(0, '#a00'); // red
gradient.addColorStop(1, '#f00'); // red
context.fillStyle = gradient;
context.strokeStyle = gradient;

Falling back

Google released a library called ExplorerCanvas

<scriptsrc="javascripts/excanvas.js">
</script>

Graphing Statistics with RGraph

<canvas width="500" height="250" id="test">[no canvas
support]</canvas>

<script type="text/javascript" charset="utf-8">
var bar = new RGraph.Bar('test', [50,25,15,10]); bar.Set
('chart.gutter', 50); bar.Set('chart.colors', ['red']); bar.Set
('chart.title', "A bar graph of my favorite pies"); bar.Set('chart.
labels', ["Banana Creme", "Pumpkin", "Apple", "Cherry"]);
bar.Draw();
</script>

Describing Data with HTML

<div id="graph_data"> <h1>Browser share for this site</h1>
<ul> <li> <p data-name="Safari 4" data-percent="15"> Safari 4 -
15% </p> </li> <li> <p data-name="Internet Explorer" data-
percent="55"> Internet Explorer - 55% </p> </li> <li> <p data-
name="Firefox" data-percent="14"> Firefox - 14% </p> </li>
<li> <p data-name="Google Chrome" data-percent="16">
Google Chrome - 16% </p> </li> </ul> </div>

load libraries
<script type="text/javascript" charset="utf-8" src="http:
//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
> </script>
<script src="javascripts/RGraph.common.js" ></script> <script
src="javascripts/RGraph.bar.js" ></script>

Turning Our HTML into a Bar Graph

function canvasGraph(){ var title = $('#graph_data h1').text();
var labels = $("#graph_data>ul>li>p[data-name]").map
(function(){ return $(this).attr("data-name"); });
var percents = $("#graph_data>ul>li>p[data-percent]").map
(function(){ return parseInt($(this).attr("data-percent")); });
var bar = new RGraph.Bar('browsers', percents); bar.Set
('chart.gutter', 50); bar.Set('chart.colors', ['red']); bar.Set
('chart.title', title); bar.Set('chart.labels', labels); bar.Draw();
}

Displaying Alternative Content

var canvas = document.getElementById('browsers');
if (canvas.getContext)
{
$('#graph_data').hide();
canvasGraph();
}

Falling back

function divGraph(barColor, textColor, width, spacer,
lblHeight)
{
$('#graph_data ul').hide();
var container = $("#graph_data");
container.css( { "display" : "block", "position" : "relative",
"height": "300px"} );
$("#graph_data>ul>li>p").each(function(i){
var bar = $("<div>" + $(this).attr("data-percent") + "%
</div>");
var label = $("<div>" + $(this).attr("data-name") +
"</div>"); var commonCSS = { "width": width + "px",
"position" : "absolute", "left" : i * (width + spacer) + "px"}; var
barCSS = { "background-color" : barColor, "color" : textColor,

Drawing on canvas

More Related Content

What's hot (18)

Viewers also liked (7)

Similar to Drawing on canvas (20)

More from suitzero (7)

Recently uploaded (20)

Drawing on canvas