Can SAS Do Canvas? Creating Graphs Using HTML 5 Canvas Elements Edwin J. van Stein Astellas Pharma Global Development.

Slides:



Advertisements
Similar presentations
HTML5 Overview HOANGPT2. 1. General 2. New Elements List 3.
Advertisements

HTML5 CANVAS.  Rectangles  Arcs  Lines  Features we won’t look at  Images  Drag and drop  Animation  Widely supported DRAWING PICTURES IN HTML.
1 HTML5 Audio and Video Credits: Dr. Jay Urbain
Iframes & Images Using HTML.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 17: Video, Audio, and Other MultiMedia.
CS1203 Uploading homework to be graded. C Click Here.
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. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.
HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it.
HTM03. Let’s Get Started Everything is drawn onto the 2D rendering context.
HTML Advanced: HTML 5. Welcome This slideshow presentation is designed to introduce you to HTML 5. It is the third of three HTML workshops available at.
1 Canvas Tag In JavaScript Amy Luong Yan Ge Hon Yee Regneel Prahalad Michael Leggio.
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.
Canvas, SVG, Workers Doncho Minkov Telerik Corporation
Javascript & HTML5 Intro. Why Javascript? Next big thing in online games Flash is slowly on its way out Can be coded via any text editor, flash costs.
Audio and Video on the Web Sec 5-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.
Web Programming Language Week 13 Ken Cosh HTML 5.
HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
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,
IT Engineering I Instructor: Rezvan Shiravi
Suleyman YILDIRIM.  Overview  Browser support  Scalability  Performance  Demos  Added value to the project.
INT222 – Internet Fundamentals Weekly Notes: AJAX and Canvas 1.
Create Interfaces College exercise. Continue HTML5: HTML5 logo, drawing images. Coin toss. Homework: acquire video & audio.
Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.
Programming Games Show your cannonball. HTML5 video. Miro. Classwork/Homework: Acquire video, convert to multiple formats, and produce simple (just html)
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML Advanced: HTML 5. Introduction to HTML 5 These slides are based on source material found at the w3schools.com website.
Getting Started with Canvas IDIA Spring 2013 Bridget M. Blodgett.
Patrick Chanezon (slides from Matthew Papakipos) June Google’s HTML5 Work: What’s Next?
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.
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.
Proglan Session 1. .  HTML5 will be the new standard for HTML.  The previous version of HTML, HTML 4.01, came in The web has changed a lot since.
Element. The element Used to dynamically draw graphics using javascript. Capable of drawing paths, circles, rectangles, text, and images.
Code for touch, get mouse and pen for free Pointer API captures pen motion, passing coordinates to Ink API Ink API helps render and stores motion.
به نام خدا تنظیم کننده : فرانه حدادی استاد : مهندس زمانیان تابستان 92.
New Tags, New Attributes, New JavaScript APIs, Forms, Validation, Audio, Video, SVG, Canvas Doncho Minkov Telerik Corporation
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
Table Tables are defined with the tag. A table is divided into rows with the tag. (tr stands for table row) A row is divided into data cells with the tag.
CS 174: Web Programming October 5 Class Meeting Department of Computer Science San Jose State University Fall 2015 Instructor: Ron Mak
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");
CHAPTER 22 ADVANCED CANVAS PROGRAMMING. LEARNING OBJECTIVES How the HTML 5 canvas supports linear and radial gradients How to fill a shape with a pattern.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
08 – Canvas(2) Informatics Department Parahyangan Catholic University.
Adding Interactivity Comp 140 Fall Web 2.0 Major change in internet usage –From mostly static pages Text Graphics Simple links –To new paradigm.
07 – HTML5 Canvas (1) Informatics Department Parahyangan Catholic University.
SVG technology SVG technology is what we want? is what we want? Jaehoon Woo KNU Real-Time Systems Lab. KNU Real-Time Systems Lab.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
CHAP 2. CANVAS API.  Dynamically generate and render graphics, charts, images and animations  SVG (Scalable Vector Graphics) vs. Canvas  Bitmap canvas.
The HTML5 logo was introduced by W3C in 2010
Internet of the Past.
CMPE 280 Web UI Design and Development September 12 Class Meeting
Chapter 4: Scalable Vector Graphics (SVG)
Canvas Notes
Web Programming Language
CMPE 280 Web UI Design and Development February 20 Class Meeting
ISC440: Web Programming II Ch14: HTML5 Canvas
Patrick Dengler Senior Program Manager Microsoft Corporation
The Canvas.
Progress <progress value="22" max="100"></progress>
Drawing Graphics in JavaScript
Simple Canvas Example Your browser doesn’t support canvases var canvas = document.getElementById("canvas1"); var context.
CSc 337 Lecture 21: Canvas.
Graphics Canvas.
CSc 337 Lecture 19: Canvas.
ADTEL WEBSITE
HTML5 – A few features L. Grewe.
Presentation transcript:

Can SAS Do Canvas? Creating Graphs Using HTML 5 Canvas Elements Edwin J. van Stein Astellas Pharma Global Development

Contents  What is a canvas element?  Compatibility  Getting started  Basic set-up  Coordinate system  Coding it in SAS  Identifying the canvas  Drawing lines, labels, shapes with straight lines and pie slices  Additional drawing methods  Additional attributes  Additional reading

What is a canvas element?  Canvas \'kan-vəs\ : a piece of cloth backed or framed as a surface for a painting; also : the painting on such a surface  Part of HTML 5 specifications  Allows for dynamic scriptable rendering of 2D shapes and bitmap images  Has a height, width and id; no border or contents  Contents is added using JavaScript

Compatibility  Native support latest versions:  Mozilla Firefox  Google Chrome  Safari  Opera  Internet Explorer 9  Support in older versions of Internet Explorer using JS library (ExplorerCanvas), no plug-ins needed

Basic set-up function drawit() { // JavaScript to draw on canvas goes here }

Canvas coordinate system  Y coordinate inverted compared to annotate in SAS

Canvas coordinate system (cont.)  Drawing lines with a width of 1 pixel

Coding it in SAS  DATA step writing to HTML file or _webout data canvas; file "C:\temp\pie.html"; set wins end=eof; if _n_=1 then do; end; if eof then do; end; run;

Identifying the canvas  JS needs to know which canvas to draw on put 'var canvas = document.getElementById("graph");';  JS needs to know which context of the canvas to use put 'var context = canvas.getContext("2d");';

Drawing lines put 'context.beginPath();'; put 'context.moveTo(.5+' x1 +(-1) ',.5+' y1 +(-1) ');'; put 'context.lineTo(.5+' x2 +(-1) ',.5+' y2 +(-1) ');'; put 'context.lineWidth=1;'; put 'context.strokeStyle="black";'; put 'context.stroke();';

Drawing lines (result)

Drawing labels put 'context.font="bold 16px sans-serif";'; put 'context.textBaseline="top";'; put 'context.textAlign="center";'; put 'context.fillStyle="black";'; put 'context.fillText("' text +(-1) '",.5+300,.5+25);';

Drawing labels (result)

Drawing shapes with straight lines put 'context.beginPath();'; put 'context.moveTo(.5+' x +(-1) '+' size +(-1) '/2,.5+' y +(-1) '+' s +(-1) '/2);'; put 'context.lineTo(.5+' x +(-1) '+' size +(-1) '/2,.5+' y +(-1) '-' s +(-1) '/2);'; put 'context.lineTo(.5+' x +(-1) '-' size +(-1) '/2,.5+' y +(-1) '-' s +(-1) '/2);'; put 'context.lineTo(.5+' x +(-1) '-' size +(-1) '/2,.5+' y +(-1) '+' s +(-1) '/2);'; put 'context.closePath();';

Drawing shapes with straight lines (cont.) put 'context.lineWidth=1;'; put 'context.strokeStyle="black";'; put 'context.stroke();'; put 'context.fillStyle="red";'; put 'context.fill();';

Drawing shapes with straight lines (result)

Drawing pie slices put 'context.beginPath();'; put 'context.moveTo(300,250);'; put 'context.arc(300,250,100,0,0.076*Math.PI*2,false);'; put 'context.closePath();';  arc(x, y, radius, start angle, end angle, anti clockwise boolean);

Drawing pie slices (cont.) put 'context.lineWidth=1;'; put 'context.strokeStyle="black";'; put 'context.stroke();'; put 'context.fillStyle="red";'; put 'context.fill();';

Drawing pie slices (result)

Additional drawing methods  strokeText()  quadraticCurveTo(), bezierCurveTo() and arcTo()

Additional drawing methods (cont.)  createLinearGradient(), createRadialGradiant() and addColorStop()  createPattern()  drawImage()

Additional attributes  globalCompositeOperation

Additional attributes (cont.)  lineCap: butt (default), round or square  lineJoin: round, bevel or miter (default)  miterLimit

Additional attributes (cont.)  globalAlpha  shadowOffsetX, shadowOffsetY, shadowBlur and shadowColor

Additional reading  In the paper:  Mouse over events  Multiple canvas graphs on a page  sasCommunity.org  The presentation  The paper  Example code

Questions? nl.linkedin.com/in/ejvanstein