9 examples of 'ctx.fillstyle' in JavaScript

Every line of 'ctx.fillstyle' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
80Rect(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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

36stroke () {
37 this.callStack.push('stroke');
38 return true;
39}
105beginPath(): void {
106 this.nativeObject.xtr_beginPath();
107}
265beginPath(): void {
266 return this._gc.beginPath();
267}
147fill() {
148 return this.vexFlowCanvasContext.fill();
149}
10draw(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}
65fillStyle() {
66 this.cmds.push(['fillStyle', arguments])
67 return this
68}
92function 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}
157render(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}

Related snippets