Scribd
Upload
6 views5 pages

Lab 1

The document discusses the HTML canvas element which is used for drawing graphics via scripting. It can be animated, interactive, and used in games. The canvas has methods for drawing paths, boxes, circles, text and images. JavaScript functions are used to perform tasks like drawing lines, circles, and styling.

Uploaded by

abebaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views5 pages

Lab 1

The document discusses the HTML canvas element which is used for drawing graphics via scripting. It can be animated, interactive, and used in games. The canvas has methods for drawing paths, boxes, circles, text and images. JavaScript functions are used to perform tasks like drawing lines, circles, and styling.

Uploaded by

abebaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 5

COMPUTER GRAPHICS

LAB 1
Canvas <html>
HTML CANVAS
• The HTML <canvas> element is used to draw graphics, on the fly,
via scripting (usually JavaScript).
• The <canvas> element is only a container for graphics. You must
use a script to actually draw the graphics.
• Canvas has several methods for drawing paths, boxes, circles, text,
and adding images.
MORE ABOUT CANVAS
• Can be Animated
• Can be Interactive
• Can be Used in Games

• The upper-left corner of the canvas has the coordinates (0,0)


STRUCTURE
<canvas id="myCanvas" width="200" height="100“
style=“border:1px solid black”></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
alert(1);
</script>
JS FUNCTIONS
• Line
• moveTo(x,y)
• lineTo(x,y)
• Stroke()

• Circle
• beginPath()
• arc(x,y,r,d)
• Stroke()

• Styling
• strokeStyle=#HHHHHH;
• linewidth=n
• Transformation
• translate(x,y)
• scale(x,y)
• rotate(Math.PI*N)
• transform(hsc,hsk,vsk,vsc,hm,vm)

You might also like