Tutorial by Examples | RIP Tutorial

Line with arrowheads

// Usage: drawLineWithArrows(50,50,150,50,5,8,true,true); // x0,y0: the line's starting point // x1,y1: the line's ending point // width: the distance the arrowhead perpendicularly extends away from the line // height: the distance the arrowhead extends backward from the endpoint // arrow...

html5-canvas • Charts & Diagrams

Cubic & Quadratic Bezier curve with arrowheads

// Usage: var p0={x:50,y:100}; var p1={x:100,y:0}; var p2={x:200,y:200}; var p3={x:300,y:100}; cubicCurveArrowHeads(p0, p1, p2, p3, 15, true, true); quadraticCurveArrowHeads(p0, p1, p2, 15, true, true); // or use defaults true for both ends with arrow heads cubicCurveArrowHeads(p0, p...

html5-canvas • Charts & Diagrams

Wedge

The code draws only the wedge ... circle drawn here for perspective only. // Usage var wedge={ cx:150, cy:150, radius:100, startAngle:0, endAngle:Math.PI*.65 } drawWedge(wedge,'skyblue','gray',4); function drawWedge(w,fill,stroke,strokewidth){ ctx.beginPath(); ...

html5-canvas • Charts & Diagrams

Arc with both fill and stroke

// Usage: var arc={ cx:150, cy:150, innerRadius:75, outerRadius:100, startAngle:-Math.PI/4, endAngle:Math.PI } drawArc(arc,'skyblue','gray',4); function drawArc(a,fill,stroke,strokewidth){ ctx.beginPath(); ctx.arc(a.cx,a.cy,a.innerRadius,a.startAngle,a.endAngle); ...

html5-canvas • Charts & Diagrams

Pie Chart with Demo

<!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext(&...

html5-canvas • Charts & Diagrams