Getting Started with Canvas IDIA 618.185 Spring 2013 Bridget M. Blodgett.

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin.
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
Events Part III The event object. Learning Objectives By the end of this lecture, you should be able to: – Learn to use the hover() function – Work with.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
CSW131 Steven Battilana 1 CSW 131 – Chapter 5 (More) Advanced CSS Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston,
Neal Stublen Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels.
Programming Club IIT Kanpur
HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it.
CIS101 Introduction to Computing Week 08. Agenda Your questions JavaScript text Resume project HTML Project Six This week online Next class.
Tutorial 2: Formatting Text. Objectives Session 2.1 – Learn the functions of the Common toolbar – Change the size of text – Discern which fonts to use.
Programming games More drawing. Text. Radian measure. Faces. Homework: Do your own drawings. Create index.html file. Upload work.
Computing Concepts Advanced HTML: Tables and Forms.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
There is a certain way that an HTML file should be set up. The HTML section declares a beginning and an ending. Within the HTML, there should be a HEAD.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
HTML Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.
 Missing (or duplicate) semicolons can make the browser completely ignore the style rule.  You may add extra spaces between the properties/values to.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
CHAPTER 21 INTRODUCING THE HTML 5 CANVAS. LEARNING OBJECTIVES How to create a canvas using the and tag pair How to test if a browser supports canvas operations.
CS7026 – HTML5 Canvas. What is the element 2  HTML5 defines the element as “a resolution-dependent bitmap canvas which can be used for rendering graphs,
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
ACM Web Development Workshop - PHP By Luis Torres.
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
JQuery Page Slider. Our goal is to get to the functionality of the Panic Coda web site.Panic Coda web site.
CO1552 – Web Application Development Lists, Special Characters, and Tables.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
HTML, HTML5 Canvas, JavaScript PART 3 LOOKING MORE CLOSELY AT FULL BLOWN GAME DESIGN A PATTERNED BACKGROUND (CREATED WTIH LOOPS) WITH A MOVING OBJECT CHALLENGES.
Review IDIA 619 Spring 2013 Bridget M. Blodgett. HTML A basic HTML document looks like this: Sample page Sample page This is a simple sample. HTML user.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS.
Session: 17. © Aptech Ltd. 2Canvas and JavaScript / Session 17  Describe Canvas in HTML5  Explain the procedure to draw lines  Explain the procedure.
Dreamweaver MX Unit B CIS 205—Web Site Design and Development.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
Element. The element Used to dynamically draw graphics using javascript. Capable of drawing paths, circles, rectangles, text, and images.
به نام خدا تنظیم کننده : فرانه حدادی استاد : مهندس زمانیان تابستان 92.
 HTML is hypertext markup language. It is a way for people to display their information with more complex pictures and text displays. Before HTML, messages.
Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.
CS 174: Web Programming October 5 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.
Graphics Concepts CS 2302, Fall /17/20142 Drawing in Android.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Modifying HTML attributes and CSS values. Learning Objectives By the end of this lecture, you should be able to: – Select based on a class (as opposed.
JavaScript Challenges Answers for challenges
Positioning Objects with CSS and Tables
08 – Canvas(2) Informatics Department Parahyangan Catholic University.
Can SAS Do Canvas? Creating Graphs Using HTML 5 Canvas Elements Edwin J. van Stein Astellas Pharma Global Development.
07 – HTML5 Canvas (1) Informatics Department Parahyangan Catholic University.
1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
Introduction to.
That Gauge is COOL! 
Internet of the Past.
Canvas Notes
Section 17.1 Section 17.2 Add an audio file using HTML
HTML Forms and User Input
ISC440: Web Programming II Ch14: HTML5 Canvas
The Canvas.
Drawing Graphics in JavaScript
Web Programming and Design
JavaScript – Let’s Draw!
Presentation transcript:

Getting Started with Canvas IDIA Spring 2013 Bridget M. Blodgett

Canvas HTML5 added the canvas element to the current line up of tags Unlike previous elements the canvas actually allows users to engage with presentation through a drawing or paint like presentation

Inserting Canvas Since canvas is supported by HTML5 it has its own element you can use – Once you have added this code the browser will automatically reserve this space on the page – The top left corner is the most important since it is where everything will be measured from

Simple Canvas Without using CSS to create a border or JavaScript to create some interactivity the canvas is just a big blank spot on your page By default the canvas you create is transparent and will fill in with colored pixels once you enable drawing – This allows it to be positioned on top of other elements like an image or a paragraph Be careful assigning a size to the canvas using CSS, it causes the default 300x150 pixel canvas to scale to that size

Filling in Canvas JavaScript is used to make content on the canvas You can make a variable and assign the output of your canvas page to it for manipulation – The book shows.getContext as one function usable in canvas. What are some others? Try altering the following code to make different sized rectangles

window.onload = function() { var canvas = document.getElementById("tshirtCanvas"); var context = canvas.getContext("2d"); context.fillRect(10, 10, 100, 100); };

Checking For Support Not all browsers support canvas yet and you should always check to make sure that it is supported before trying anything By using this code you can run this check: if (canvas.getContext) { // you have canvas } else { // sorry no canvas aPI support } By placing text between the canvas tags you can alert users who don’t have canvas that they are missing a feature on the site – This text is conveniently ignored by browsers that support canvas

Including Forms You can use forms on your HTML page to allow a user to make changes to the canvas – Instead of submitting JS will handle the values when the user clicks a button The JS for pulling information from an option menu is a bit different than what we’ve encountered before

var selectObj = document.getElementById("backgroundColor"); var index = selectObj.selectedIndex; var bgColor = selectObj[index].value; var selectObj = document.getElementById("shape"); var index = selectObj.selectedIndex; var shape = selectObj[index].value; var selectObj = document.getElementById("foregroundColor"); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value;

Creating Random Elements By using custom functions we can make and add random elements to the canvas The important step is making sure that any custom functions you create are passed the canvas and the context variables – If you forget this they won’t be able to add their random items to the canvas!

function drawSquare(canvas, context) { var w = Math.floor(Math.random() * 40); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.fillStyle = "lightblue"; context.fillRect(x, y, w, w); }

Replacing Canvas Items If you want users to be able to “reset” their canvas you should make a function the sends the canvas back to its starting state The easiest way to do this is often to just fill in the background with a rectangle that is the same color and size as your default canvas element

function previewHandler() { //stuff fillBackgroundColor(canvas, context); //other stuff } function fillBackgroundColor(canvas, context) { var selectObj = document.getElementById("backgroundColor"); var index = selectObj.selectedIndex; var bgColor = selectObj[index].value; context.fillStyle = bgColor; context.fillRect(0, 0, canvas.width, canvas.height); }

Paths and Strokes Shapes besides rectangles can be more difficult – We need to determine a path that the shape follows and then stroke (copy over) that path with a color The beginPath(), moveTo(), an lineTo() methods set up the initial outline – closePath() will end the shape we’re drawing by connecting the current point with the starting point

function fillTriangle(canvas, context) { context.beginPath(); context.moveTo(100, 150); context.lineTo(250, 75); context.lineTo(125, 30); context.closePath(); context.lineWidth = 5; context.stroke(); context.fillStyle = "red"; context.fill(); }

Arcs Circles are more difficult because they do not go in a straight line – JS needs to compute the arc or degree of the curve between two points Like other shapes begin with beingPath() but then use arc() – context.arc(x, y, radius, startangle, endangle, direction)

Radians Canvas does not compute circles in degrees (like we are used to doing) Instead it uses radians which are equal to 180 divided by π A function can do this conversion for you automatically function degreesToRadians(degrees) { return (degrees * Math.PI)/180; }

Combining Sources You can integrate information from other web services into the canvas Using the callback function from last week we can get a user’s twitter information to display on the canvas It simply requires a small script on the HTML page and a function in our JS code <script src=" edsmartly.json? callback=updateTweets">

function updateTweets(tweets) { var tweetsSelection = document.getElementById("tweets"); for (var i = 0; i < tweets.length; i++) { tweet = tweets[i]; var option = document.createElement("option"); option.text = tweet.text; option.value = tweet.text.replace("\"", "'"); tweetsSelection.options.add(option); } tweetsSelection.selectedIndex = 0; }

Adding Text There is a method called fillText() which will take some input text and a starting area and write it to your canvas You can then use the font, textBasline, textAlign properties to style your text on the screen – They accept strings similar to CSS inside quotes

function drawText(canvas, context) { var selectObj = document.getElementById("foregroundColor"); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value; context.fillStyle = fgColor; context.font = "bold 1em sans-serif"; context.textAlign = "left"; context.fillText("I saw this tweet", 20, 40); selectObj = document.getElementById("tweets"); index = selectObj.selectedIndex; var tweet = selectObj[index].value; context.font = "italic 1.2em serif"; context.fillText(tweet, 30, 100); context.font = "bold 1em sans-serif"; context.textAlign = "right"; context.fillText("and all I got was this lousy t-shirt!", canvas.width-20, canvas.height-40); }

Adding Images Images require a bit of prep work – The image must be in a folder accessible to your JS – In the JS code you will need to make a new image variable and set its.src property to the location of the image file Then once the image has loaded you can draw it on the screen at a selected location

function drawBird(canvas, context) { var twitterBird = new Image(); twitterBird.src = "twitterBird.png"; twitterBird.onload = function() { context.drawImage(twitterBird, 20, 120, 70, 70); }; }