Your browser does not support the canvas tag. function draw() { var canvas = document.getElementById("canvas"); var con = canvas.getContext('2d'); con.strokeStyle = "black"; con.strokeRect(0, 0, 200, 200); con.fillStyle = "red"; con.fillRect(40, 140, 150, 50); } Demo canvas/simple.html"> Your browser does not support the canvas tag. function draw() { var canvas = document.getElementById("canvas"); var con = canvas.getContext('2d'); con.strokeStyle = "black"; con.strokeRect(0, 0, 200, 200); con.fillStyle = "red"; con.fillRect(40, 140, 150, 50); } Demo canvas/simple.html">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS 174: Web Programming October 5 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak.

Published byRandall Ball Modified over 8 years ago

Similar presentations

Presentation on theme: "CS 174: Web Programming October 5 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak."— Presentation transcript:

1 CS 174: Web Programming October 5 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak The HTML5 Canvas Object  HTML5 introduces the drawing canvas.  The tag provides a graphics context.  A rich set of drawing operations. Execute using JavaScript. Replaces the needed for Flash or Java. Used by many game developers.  Universally supported by modern browsers. 2

3 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Simple Canvas Demo 3 <canvas id = "canvas" width = "200" height = "200"> Your browser does not support the canvas tag. function draw() { var canvas = document.getElementById("canvas"); var con = canvas.getContext('2d'); con.strokeStyle = "black"; con.strokeRect(0, 0, 200, 200); con.fillStyle = "red"; con.fillRect(40, 140, 150, 50); } Demo canvas/simple.html

4 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Canvas Basics  Two main canvas drawing operations: stroke: draw a line fill: fill in a shape  Specify strokestyle and fillstyle.  Basic shapes: lines, rectangles, arcs, text  Create paths to draw complex shapes.  Draw images.  Alter pixels. 4

5 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Ways to Specify Colors  By name: red, silver, gray, etc.  RGB with integers 0-255 or percentages: rgb(10, 250, 100) or rgb(100%, 100%, 0%)  RGBA with alpha transparency.  HSL and HSLA  RGB with six-digit hex values: #FF0000 is red, #FFFF00 is yellow.  RGB with three-digit hex values: #F00 is red, #FF0 is yellow. 5

6 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Gradients  Fill a shape with a gradient.  Linear gradient or radial gradient.  Color stop: Specifies a color to add to a gradient and a position along the gradient. Position 0 through 1 0 = beginning of the gradient 1 = end of the gradient 6

7 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Gradients, cont’d 7 <canvas id = "linear" height = "200" width = "200"> Canvas not supported! <canvas id = "radial" height = "200" width = "200"> Canvas not supported! canvas/gradients.html

8 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Gradients, cont’d 8 function draw() { var linear = document.getElementById("linear"); var radial = document.getElementById("radial"); // Linear gradient var con = linear.getContext("2d"); lGrad = con.createLinearGradient(0, 0, 100, 200); lGrad.addColorStop(0, "#FF0000"); lGrad.addColorStop(0.5, "#00FF00"); lGrad.addColorStop(1, "#0000FF"); con.fillStyle = lGrad; con.fillRect(0, 0, 200, 200);... } canvas/gradients.html

9 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Gradients, cont’d 9 function draw() {... // Radial gradient con = radial.getContext("2d"); rGrad = con.createRadialGradient(50, 50, 0, 100, 100, 125); rGrad.addColorStop(0, "#FF0000"); rGrad.addColorStop(0.5, "#00FF00"); rGrad.addColorStop(1, "#0000FF"); con.fillStyle = rGrad; con.fillRect(0, 0, 200, 200); } canvas/gradients.html

10 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Gradients, cont’d 10 createLinearGradient(0, 0, 100, 200) createRadialGradient(50, 50, 0, 100, 100, 125) starting positionending position center position of inner circle center position of outer circle radius of inner circle radius of outer circle

11 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Rectangle Operations  strokeRect(x, y, w, h) Draw the outline of a rectangle with the upper left corner at position x, y and width w and height h. Use the current strokeStyle and lineWidth.  fillRect(x, y, w, h) Draw a filled-in rectangle. Fill with the current fillStyle.  clearRect(x, y, w, h) Erase a rectangle by filling in with the current background color. 11

12 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Rectangle Operations, cont’d 12 <canvas id = "canvas" height = "200" width = "200" > Canvas not supported function draw() { var canvas = document.getElementById("canvas"); var con = canvas.getContext("2d"); con.fillStyle = "blue"; con.strokeStyle = "black"; con.lineWidth = "5"; con.strokeRect(0, 0, 200, 200); con.fillRect(10, 10, 180, 80); con.clearRect(0, 50, 90, 70); } canvas/rectangles.html

13 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Drawing Text  fillText( string, x, y) Display the characters of string at offset x and baseline at y.  strokeText( string, x, y) Display the outline of the characters of string. 13 <canvas id = "canvas" height = "200" width = "200" > Canvas not supported

14 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Drawing Text, cont’d 14 function draw() { var canvas = document.getElementById("canvas"); var con = canvas.getContext("2d"); con.strokeStyle = "black"; con.strokeRect(0, 0, 200, 200); con.font = "40pt sans-serif"; con.fillStyle = "red"; con.fillText("CS 174", 5, 75); con.strokeText("CS 174", 5, 150); } canvas/text.html

15 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Shadows  Add a shadow to any object you draw on the canvas.  Canvas shadow attributes: shadowOffsetX, shadowOffsetY How much to move the shadow along the x and y axes. shadowColor Default is black. shadowBlur 0: crisp and sharp 5: softer and lighter 15

16 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Shadows, cont’d 16 function draw() { var canvas = document.getElementById("canvas"); var con = canvas.getContext("2d"); con.strokeStyle = "black"; con.strokeRect(0, 0, 200, 200); con.shadowOffsetX = 3; con.shadowOffsetY = 3; con.shadowColor = "gray"; con.shadowBlur = 5; con.font = "40pt sans-serif"; con.fillStyle = "red"; con.fillText("CS 174", 5, 100); } canvas/shadow.html

17 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Paths  A path records “pen motion”. 17 function draw() {... con.strokeStyle = "red"; con.fillStyle = "green"; con.lineWidth = "10"; con.beginPath(); con.moveTo(25, 25); con.lineTo(150, 150); con.lineTo(25, 150); con.lineTo(25, 100); con.closePath(); con.stroke(); con.fill(); } canvas/path.html

18 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Line Attributes  strokeStyle  lineWidth in pixels  lineJoin miter : sharp corners round : rounded corners bevel : squared-off corners  lineCap round : rounded edges butt : squared-off edges cut off exactly at line width square : like butt but with a small added length 18

19 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Line Attributes, cont’d  Line joins: 19 con.lineJoin = "round" con.strokeStyle = "red"; con.beginPath(); con.moveTo(20, 50); con.lineTo(30, 20); con.lineTo(40, 50); con.stroke(); con.closePath(); con.lineJoin = "bevel" con.strokeStyle = "blue"; con.beginPath(); con.moveTo(60, 50); con.lineTo(70, 20); con.lineTo(80, 50); con.stroke(); con.closePath(); con.lineJoin = "miter"; con.strokeStyle = "green" con.beginPath(); con.moveTo(100, 50); con.lineTo(110, 20); con.lineTo(120, 50); con.stroke(); con.closePath(); canvas/lines.html

20 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Line Attributes, cont’d  Line caps: 20 con.lineCap = "round"; con.strokeStyle = "red" con.beginPath(); con.moveTo(20, 100); con.lineTo(180, 100); con.stroke(); con.closePath(); con.lineCap = "butt"; con.strokeStyle = "blue" con.beginPath(); con.moveTo(20, 120); con.lineTo(180, 120); con.stroke(); con.closePath(); con.lineCap = "square"; con.strokeStyle = "green" con.beginPath(); con.moveTo(20, 140); con.lineTo(180, 140); con.stroke(); con.closePath(); canvas/lines.html

21 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Arcs and Circles 21 arc(70, 30, 50, 0, Math.PI, false) center position radius starting and ending angles in radians drawing direction true: counter-clockwise false: clockwise CompassRadians East 0 South Math.PI/2 West Math.PI North 3*Math.PI/2

22 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Arcs and Circles, cont’d 22 // Stroked closed half-circle con.strokeStyle = "green"; con.lineWidth = "5"; con.beginPath(); con.arc(70, 30, 50, 0, Math.PI, false); con.closePath(); con.stroke(); // Filled full circle con.fillStyle = "rgba(255, 0, 0, 0.5)"; con.beginPath(); con.arc(70, 100, 50, 0, 2*Math.PI, true); con.closePath(); con.fill(); // Stroked quarter arc con.strokeStyle = "blue"; con.beginPath(); con.arc(180, 120, 50, Math.PI/2, Math.PI, false); con.stroke(); con.closePath(); canvas/arcs.html

23 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Quadratic Curve  Curve with starting and ending points.  A control point affects the shape of the curve. 23 quadraticCurveTo(100, 10, 190, 190) control point position ending point position

24 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Quadratic Curve, cont’d 24 con.beginPath(); con.moveTo(10,190); con.quadraticCurveTo(100, 10, 190, 190); con.stroke(); con.closePath(); // Blue dots: start and end points. drawDot(10, 190, "blue"); drawDot(190, 190, "blue"); // Red dot: control point. drawDot(100, 10, "red"); function drawDot(x, y, color) { con.fillStyle = color; con.beginPath(); con.arc(x, y, 10, 0, 2*Math.PI, true); con.fill(); con.closePath(); } canvas/quadratic.html

25 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Bézier Curve  Similar to the quadratic curve, but with two control points. 25 bezierCurveTo(100, 10, 100, 190, 190, 190) ending point position control point #1 position control point #2 position

26 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Bézier Curve, cont’d 26 con.beginPath(); con.moveTo(10,10); con.bezierCurveTo(100, 10, 100, 190, 190, 190); con.stroke(); con.closePath(); // Blue dots: start and end points. drawDot(10, 10, "blue"); drawDot(190, 190, "blue"); // Red dots: control points. drawDot(100, 10, "red"); drawDot(100, 190, "red"); canvas/bezier.html

27 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Drawing an Image 27 drawImage(image, 150, 70, 190, 120, 10, 10, 180, 110) drawImage(image, 10, 10, 180, 135) destination position destination width and height destination position destination width and height image upper left corner position image width and height  Draw the entire image:  Draw part of the image:

28 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Drawing an Image, cont’d 28 var image = new Image(); image.src = "images/RonCats.jpg";... con.drawImage(image, 10, 10, 180, 135);... con.drawImage(image, 150, 70, 190, 120, 10, 10, 180, 110); canvas/images.html

29 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Altering Pixels  An image is displayed in a canvas as an array of pixels.  Each pixel takes up four elements of the array, R, G, B, and A, each value can be 0 – 255.  Convert an image to imageData to get the array of RGBA values.  You can then alter each value. 29

30 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Altering Pixels, cont’d 30 var imageData = con.getImageData(10, 10, 180, 135); for (var row = 0; row < 135; row++) { for (var col = 0; col < 180; col++) { var index = 4*(col + row*imageData.width); var r = imageData.data[index]; var g = imageData.data[index+1]; var b = imageData.data[index+2]; var a = imageData.data[index+3]; g = r; b = r; imageData.data[index] = r; imageData.data[index+1] = g; imageData.data[index+2] = b; imageData.data[index+3] = a; } } con.putImageData(imageData, 10, 10); Get the image data from the canvas. Separate each pixel into R, G, B, and A Alter each pixel. Set the altered pixel back into the image data. Put the altered image data back into the canvas. canvas/pixels.html

31 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Altering Pixels, cont’d 31

32 Computer Science Dept. Fall 2015: October 5 CS 174: Web Programming © R. Mak Assignment #4  Add JavaScript to your web application. Client-side input validation Greater interactivity  Extra credit (after this week’s lectures) +5 points: JavaScript drawing on an HTML5 canvas. +5 points: JavaScript animation  Turn in the usual zip file containing source files, database dump, and screen shots.  Due Wednesday, October 14. 32

Download ppt "CS 174: Web Programming October 5 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak."

Similar presentations

HTML5 CANVAS.  Rectangles  Arcs  Lines  Features we won’t look at  Images  Drag and drop  Animation  Widely supported DRAWING PICTURES IN HTML.

HTML5 CANVAS.  Rectangles  Arcs  Lines  Features we won’t look at  Images  Drag and drop  Animation  Widely supported DRAWING PICTURES IN HTML.
Lecture # 11 JavaScript Graphics. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation):

Lecture # 11 JavaScript Graphics. Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation):
CSS level 3. History of CSS CSS level 1 – original CSS CSS level 2 CSS level 2 Revision 1 (CSS2.1) – up to CSS2.1 monolithic structure CSS level 3 – specification.

CSS level 3. History of CSS CSS level 1 – original CSS CSS level 2 CSS level 2 Revision 1 (CSS2.1) – up to CSS2.1 monolithic structure CSS level 3 – specification.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts.

Basics of Web Design Chapter 6 More CSS Basics Key Concepts.
Programming Club IIT Kanpur

Programming Club IIT Kanpur
HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it.

HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it.
Chapter 7 Creating Graphics. Chapter Objectives Use the Pen tool Reshape frames and apply stroke effects Work with polygons and compound paths Work with.

Chapter 7 Creating Graphics. Chapter Objectives Use the Pen tool Reshape frames and apply stroke effects Work with polygons and compound paths Work with.
CS 174: Web Programming February 26 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak.

CS 174: Web Programming February 26 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak
Adobe Illustrator CS2 — Revealed GRADIENTS CREATING TEXT AND.

Adobe Illustrator CS2 — Revealed GRADIENTS CREATING TEXT AND.
269200 Web Programming Language Week 13 Ken Cosh HTML 5.

Web Programming Language Week 13 Ken Cosh HTML 5.
Getting Started with Canvas IDIA 618.185 Spring 2013 Bridget M. Blodgett.

Getting Started with Canvas IDIA Spring 2013 Bridget M. Blodgett.
HTML 5 Tutorial Chapter 5 Canvas. Canvas The tag is used to display graphics. The Canvas is a rectangular area we control each and every pixel of it.

HTML 5 Tutorial Chapter 5 Canvas. Canvas The tag is used to display graphics. The Canvas is a rectangular area we control each and every pixel of it.
Session: 17. © Aptech Ltd. 2Canvas and JavaScript / Session 17  Describe Canvas in HTML5  Explain the procedure to draw lines  Explain the procedure.

Session: 17. © Aptech Ltd. 2Canvas and JavaScript / Session 17  Describe Canvas in HTML5  Explain the procedure to draw lines  Explain the procedure.
Element. The element Used to dynamically draw graphics using javascript. Capable of drawing paths, circles, rectangles, text, and images.

Element. The element Used to dynamically draw graphics using javascript. Capable of drawing paths, circles, rectangles, text, and images.
CS 174: Web Programming September 30 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak.

CS 174: Web Programming September 30 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak
Lecture 15: Intro to Graphics Yoni Fridman 7/25/01 7/25/01.

Lecture 15: Intro to Graphics Yoni Fridman 7/25/01 7/25/01.
CS 174: Web Programming October 7 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak.

CS 174: Web Programming October 7 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak
© 2010 Delmar, Cengage Learning Chapter 7 Creating Graphics.

© 2010 Delmar, Cengage Learning Chapter 7 Creating Graphics.
Intro to the Canvas Canvas is an HTML5 element If you see this, your browser doesn't support the canvas Canvas is manipulated with javascript c = document.getElementById(mycanvas);

Intro to the Canvas Canvas is an HTML5 element If you see this, your browser doesn't support the canvas Canvas is manipulated with javascript c = document.getElementById("mycanvas");
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

Similar presentations

Ads by Google