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