JavaScript Routines Part 2: Canvas (whole)

So what this is here is some things I've pieced together, including drawing prisms and cubes.

1. var canvas;
2. var ctx;
3. window.onload = function(){
4.     canvas = document.getElementById("canvas")
5.     ctx = canvas.getContext('2d')
6. }
7. function Circle(ctx,x,y,r){
8.     // x = top corner X      y = top corner Y
9.     // r = radius            ctx = canvas context
10.     ctx.fillStyle = "#000000"
11.     ctx.beginPath();
12.     ctx.arc(x+r,y+r,r,0,Math.PI*2,true);
13.     ctx.stroke();
14. }
15. function rectRound(ctx,x,y,width,height,radius){
16.     ctx.beginPath();
17.     ctx.moveTo(x,y+radius);
18.     ctx.lineTo(x,y+height-radius);
19.     ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
20.     ctx.lineTo(x+width-radius,y+height);
21.     ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
22.     ctx.lineTo(x+width,y+radius);
23.     ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
24.     ctx.lineTo(x+radius,y);
25.     ctx.quadraticCurveTo(x,y,x,y+radius);
26.     ctx.stroke();
27.     ctx.fill();
28. }
29. function prism(ctx,x,y,width,height,depth,lineWidth,fillStyle){
30.     // x = top corner X      y = top corner Y
31.     // ctx = canvas context  
32.     // example: prism(ctx,150,150,200,200,200,2,"rgba(22,0,22,.9)")
33.     depth /= 3;
34.     // COLORS
35.     ctx.strokeStyle = "rgba(0,0,0,0)";
36.     ctx.fillStyle = fillStyle;
37.     ctx.beginPath();
38.     ctx.moveTo(x,y);
39.     ctx.lineTo(x,y+width);
40.     ctx.lineTo(x+width,y+width);
41.     ctx.lineTo(x+width+depth,y+width-depth)
42.     ctx.lineTo(x+width+depth,y-depth)
43.     ctx.lineTo(x+depth,y-depth)
44.     ctx.fill();
45.     // LINES
46.     ctx.strokeStyle = "#000000"
47.     ctx.lineWidth = lineWidth;
48.     ctx.lineJoin = "miter";
49.     ctx.beginPath();
50.     ctx.moveTo(x,y);
51.     ctx.lineTo(x+width,y);
52.     ctx.lineTo(x+width,y+height);
53.     ctx.lineTo(x,y+height);
54.     ctx.lineTo(x,y);
55.     ctx.lineTo(x+width,y);
56.     // MOVING X AND Y DEFAULTLY
57.     x+=width;y+=height;
58.     ctx.moveTo(x,y);
59.     ctx.lineTo(x+depth,y-depth);
60.     ctx.lineTo(x+depth,y-height-depth);
61.     ctx.lineTo(x,y-height)
62.     ctx.moveTo(x+depth,y-height-depth);
63.     ctx.lineTo(x+depth-width,y-height-depth);
64.     ctx.lineTo(x-width,y-height);
65.     ctx.stroke();  
66. }
67. function cube(ctx,x,y,width,lineWidth,fillStyle){
68.     // x = top corner X      y = top corner Y
69.     // ctx = canvas context  
70.     // example: cube(ctx,150,150,20,2,"rgba(44,22,44,1)")
71.     depth = width / 3;
72.     height = width;
73.     // COLORS
74.     ctx.strokeStyle = "rgba(0,0,0,0)";
75.     ctx.fillStyle = fillStyle;
76.     ctx.beginPath();
77.     ctx.moveTo(x,y);
78.     ctx.lineTo(x,y+width);
79.     ctx.lineTo(x+width,y+width);
80.     ctx.lineTo(x+width+depth,y+width-depth)
81.     ctx.lineTo(x+width+depth,y-depth)
82.     ctx.lineTo(x+depth,y-depth)
83.     ctx.fill();
84.     // LINES
85.     ctx.strokeStyle = "#000000"
86.     ctx.lineWidth = lineWidth;
87.     ctx.lineJoin = "miter";
88.     ctx.beginPath();
89.     ctx.moveTo(x,y);
90.     ctx.lineTo(x+width,y);
91.     ctx.lineTo(x+width,y+height);
92.     ctx.lineTo(x,y+height);
93.     ctx.lineTo(x,y);
94.     ctx.lineTo(x+width,y);
95.     // MOVING X AND Y DEFAULTLY
96.     x+=width;y+=height;
97.     ctx.moveTo(x,y);
98.     ctx.lineTo(x+depth,y-depth);
99.     ctx.lineTo(x+depth,y-height-depth);
100.     ctx.lineTo(x,y-height)
101.     ctx.moveTo(x+depth,y-height-depth);
102.     ctx.lineTo(x+depth-width,y-height-depth);
103.     ctx.lineTo(x-width,y-height);
104.     ctx.stroke();  
105. }
106. function transPrism(ctx,x,y,width,height,depth,lineWidth,opacity,fillStyle){
107.     // x = top corner X      y = top corner Y
108.     // ctx = canvas context  
109.     // example: transPrism(ctx,150,150,200,200,200,2,.5)
110.     prism(ctx,x,y,width,height,depth,lineWidth,fillStyle);
111.     ctx.lineWidth = lineWidth;
112.     ctx.lineJoin = "miter";
113.     ctx.strokeStyle = "rgba(0,0,0," + opacity + ")"
114.     depth /= 3;
115.     ctx.moveTo(x+depth,y+height-depth);
116.     ctx.lineTo(x+depth,y-depth);
117.     ctx.moveTo(x+depth,y+height-depth);
118.     ctx.lineTo(x,y+height);
119.     ctx.moveTo(x+depth,y+height-depth);
120.     ctx.lineTo(x+width+depth,y+height-depth);
121.     ctx.stroke();
122. }