Showerpan-Rendering/script.js at main · twhitney11/Showerpan-Rendering · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var w = 72; // width
var h = 72; // height
var lh = 46; // little height
var lw = 46; // little width

var t = 36;
var l = 36;

var drain_size = 4;
var multiplier = 6;
var padding = 10;
var color = "#23A9E1";

drain_size = drain_size * multiplier;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function drain(){
  ctx.beginPath();
  ctx.arc(l * multiplier + padding, t * multiplier + padding, drain_size, 0, 2*Math.PI);
  ctx.stroke();
  //ctx.fillStyle = "#56585A";
  ctx.fillStyle = "#000";
  ctx.fill();
  ctx.closePath();
}

function rectangle(){
  ctx.fillStyle = color;
  ctx.fillRect(padding, padding, w * multiplier, h * multiplier);
  ctx.lineWidth = 0.5;
  ctx.strokeRect(padding, padding, w * multiplier, h * multiplier);
  drain();
}

function neo() {
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(padding, padding);
    ctx.lineTo(w * multiplier + padding, padding);
    ctx.lineTo(w * multiplier + padding, lh * multiplier - padding);
    ctx.lineTo(lw * multiplier, h * multiplier + padding);
    ctx.lineTo(padding, h * multiplier + padding);
    ctx.lineTo(padding, padding);
    ctx.stroke();
    ctx.fill();
    drain();
}

function el() {
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(padding, padding);
    ctx.lineTo(w * multiplier + padding, padding);
    ctx.lineTo(w * multiplier + padding, lh * multiplier - padding);
    ctx.lineTo(lw * multiplier, lh * multiplier - padding);
    ctx.lineTo(lw * multiplier, h * multiplier + padding);
    ctx.lineTo(padding, h * multiplier + padding);
    ctx.lineTo(padding, padding);
    ctx.stroke();
    ctx.fill();
    drain();
}

function d_shaped() {
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(padding, padding);
    ctx.lineTo(w * multiplier + padding, padding);
    ctx.lineTo(w * multiplier + padding, h * multiplier + padding);
    ctx.arc((w * multiplier) / 2 + padding, h * multiplier + padding, (w * multiplier) / 2, 0, Math.PI);
    ctx.lineTo(padding, padding);
    ctx.stroke();
    ctx.fill();
    drain();
}

//rectangle();
//neo();
//el();
d_shaped();