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

2. 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

3. 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

4. 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

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

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

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

8. 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;

9. 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");';

10. 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();';

11. Drawing lines (result)

12. 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);';

13. Drawing labels (result)

14. 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();';

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

16. Drawing shapes with straight lines (result)

17. 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);

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

19. Drawing pie slices (result)

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

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

22. Additional attributes  globalCompositeOperation

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

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

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

26. Questions? nl.linkedin.com/in/ejvanstein ejvanstein@gmail.com