9 examples of 'ctx.fillstyle' in JavaScript

80
Rect(r: rect) {
81
    var cc = this.CanvasContext;
82
    cc.beginPath();
83
    cc.rect(r.X, r.Y, r.Width, r.Height);
84
    //DrawDebug("Rect: " + r.toString());
85
}

36
stroke () {
37
    this.callStack.push('stroke');
38
    return true;
39
}

105
beginPath(): void {
106
    this.nativeObject.xtr_beginPath();
107
}

265
beginPath(): void {
266
  return this._gc.beginPath();
267
}

147
fill() {
148
  return this.vexFlowCanvasContext.fill();
149
}

10
draw(ctx) {
11
  if (this.type === 1) {
12
    ctx.beginPath();
13
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, true);
14
    ctx.lineWidth = 1;
15
    ctx.strokeStyle = '#000';
16
    ctx.globalAlpha = 0.6;
17
    ctx.fillStyle = '#000';
18
    ctx.fill();
19
    ctx.stroke();
20
    ctx.globalAlpha = 1;
21
  } else if (this.type === -1) {
22
    ctx.beginPath();
23
    ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, true);
24
    ctx.lineWidth = 1;
25
    ctx.strokeStyle = '#FFF';
26
    ctx.globalAlpha = 0.6;
27
    ctx.fillStyle = '#FFF';
28
    ctx.fill();
29
    ctx.stroke();
30
    ctx.globalAlpha = 1;
31
  } else {
32
    ctx.beginPath();
33
    ctx.lineWidth = 1;
34
    ctx.moveTo(this.x - this.size, this.y - this.size);
35
    ctx.lineTo(this.x + this.size, this.y + this.size);
36
    ctx.moveTo(this.x - this.size, this.y + this.size);
37
    ctx.lineTo(this.x + this.size, this.y - this.size);
38
    ctx.stroke();
39
  }
40
  ctx.globalAlpha = 1;
41
  ctx.strokeStyle = '#000';
42
  ctx.fillStyle = '#000';
43
}

65
fillStyle() {
66
  this.cmds.push(['fillStyle', arguments])
67
  return this
68
}

92
function setLineStyle(ctx, style={ color: 'green', lineDash: [], shadow: false, shadowBlur: 4, shadowColor: '#eee' }) {
93
    ctx.strokeStyle = style.color;
94
    ctx.setLineDash(style.lineDash);
95
    ctx.globalAlpha = 0.95;
96
    ctx.globalCompositeOperation = 'source-over';
97
    if (style.shadow === true) {
98
        ctx.shadowBlur = style.shadowBlur;
99
        ctx.shadowColor = style.shadowColor;
100
    } else {
101
        ctx.shadowBlur = 0;
102
    }
103
104
    // ctx.strokeStyle = 'green';
105
    ctx.lineCap = "round";  // square
106
    ctx.lineJoin = 'round'; // bevel
107
    ctx.lineWidth = 12;
108
}

157
render(ctx, layer) {
158
	if (layer.width == 0 && layer.height == 0)
159
		return;
160
161
	var params = layer.params;
162
	var power = params.radial_power;
163
	var alpha = params.alpha / 100 * 255;
164
	var color1 = layer.color;
165
	var color2 = params.color_2;
166
	var radial = params.radial;
167
168
	var color2_rgb = this.Helper.hex2rgb(color2);
169
170
	var width = layer.x + layer.width - 1;
171
	var height = layer.y + layer.height - 1;
172
173
	if (radial == false) {
174
		//linear
175
		ctx.rect(0, 0, config.WIDTH, config.HEIGHT);
176
		var grd = ctx.createLinearGradient(
177
			layer.x, layer.y,
178
			width, height);
179
180
		grd.addColorStop(0, color1);
181
		grd.addColorStop(1, "rgba(" + color2_rgb.r + ", " + color2_rgb.g + ", "
182
			+ color2_rgb.b + ", " + alpha / 255 + ")");
183
		ctx.fillStyle = grd;
184
		ctx.fill();
185
	}
186
	else {
187
		//radial
188
		var dist_x = layer.width;
189
		var dist_y = layer.height;
190
		var center_x = layer.x + Math.round(layer.width / 2);
191
		var center_y = layer.y + Math.round(layer.height / 2);
192
		var distance = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y));
193
		var radgrad = ctx.createRadialGradient(
194
			center_x, center_y, distance * power / 100,
195
			center_x, center_y, distance);
196
197
		radgrad.addColorStop(0, color1);
198
		radgrad.addColorStop(1, "rgba(" + color2_rgb.r + ", " + color2_rgb.g + ", "
199
			+ color2_rgb.b + ", " + alpha / 255 + ")");
200
		ctx.fillStyle = radgrad;
201
		ctx.fillRect(0, 0, config.WIDTH, config.HEIGHT);
202
	}
203
}