Lines Matching refs:ctx
281 const ctx = canvas.getContext('2d'); constant
282 ctx.scale(3.0, 3.0);
283 ctx.moveTo(20, 5);
284 ctx.lineTo(30, 20);
285 ctx.lineTo(40, 10);
286 ctx.lineTo(50, 20);
287 ctx.lineTo(60, 0);
288 ctx.lineTo(20, 5);
290 ctx.moveTo(20, 80);
291 ctx.bezierCurveTo(90, 10, 160, 150, 190, 10);
293 ctx.moveTo(36, 148);
294 ctx.quadraticCurveTo(66, 188, 120, 136);
295 ctx.lineTo(36, 148);
297 ctx.rect(5, 170, 20, 25);
299 ctx.moveTo(150, 180);
300 ctx.arcTo(150, 100, 50, 200, 20);
301 ctx.lineTo(160, 160);
303 ctx.moveTo(20, 120);
304 ctx.arc(20, 120, 18, 0, 1.75 * Math.PI);
305 ctx.lineTo(20, 120);
307 ctx.moveTo(150, 5);
308 ctx.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI)
310 ctx.lineWidth = 2;
311 ctx.stroke();
314 ctx.beginPath();
315 ctx.arc(50, 100, 10, Math.PI, -Math.PI/2);
316 ctx.stroke();
317 ctx.beginPath();
318 ctx.arc(75, 100, 10, Math.PI, -Math.PI/2, true);
319 ctx.stroke();
320 ctx.beginPath();
321 ctx.arc(100, 100, 10, Math.PI, 100.1 * Math.PI, true);
322 ctx.stroke();
323 ctx.beginPath();
324 ctx.arc(125, 100, 10, Math.PI, 100.1 * Math.PI, false);
325 ctx.stroke();
326 ctx.beginPath();
327 ctx.ellipse(155, 100, 10, 15, Math.PI/8, 100.1 * Math.PI, Math.PI, true);
328 ctx.stroke();
329 ctx.beginPath();
330 ctx.ellipse(180, 100, 10, 15, Math.PI/8, Math.PI, 100.1 * Math.PI, true);
331 ctx.stroke();
335 const ctx = canvas.getContext('2d'); constant
336 ctx.rect(10, 10, 20, 20);
338 ctx.scale(2.0, 4.0);
339 ctx.rect(30, 10, 20, 20);
340 ctx.resetTransform();
342 ctx.rotate(Math.PI / 3);
343 ctx.rect(50, 10, 20, 20);
344 ctx.resetTransform();
346 ctx.translate(30, -2);
347 ctx.rect(70, 10, 20, 20);
348 ctx.resetTransform();
350 ctx.translate(60, 0);
351 ctx.rotate(Math.PI / 6);
352 ctx.transform(1.5, 0, 0, 0.5, 0, 0); // effectively scale
353 ctx.rect(90, 10, 20, 20);
354 ctx.resetTransform();
356 ctx.save();
357 ctx.setTransform(2, 0, -.5, 2.5, -40, 120);
358 ctx.rect(110, 10, 20, 20);
359 ctx.lineTo(110, 0);
360 ctx.restore();
361 ctx.lineTo(220, 120);
363 ctx.scale(3.0, 3.0);
364 ctx.font = '6pt Noto Mono';
365 ctx.fillText('This text should be huge', 10, 80);
366 ctx.resetTransform();
368 ctx.strokeStyle = 'black';
369 ctx.lineWidth = 2;
370 ctx.stroke();
372 ctx.beginPath();
373 ctx.moveTo(250, 30);
374 ctx.lineTo(250, 80);
375 ctx.scale(3.0, 3.0);
376 ctx.lineTo(280/3, 90/3);
377 ctx.closePath();
378 ctx.strokeStyle = 'black';
379 ctx.lineWidth = 5;
380 ctx.stroke();
384 const ctx = canvas.getContext('2d'); constant
385 ctx.strokeStyle = '#000';
386 ctx.fillStyle = '#CCC';
387 ctx.shadowColor = 'rebeccapurple';
388 ctx.shadowBlur = 1;
389 ctx.shadowOffsetX = 3;
390 ctx.shadowOffsetY = -8;
391 ctx.rect(10, 10, 30, 30);
393 ctx.save();
394 ctx.strokeStyle = '#C00';
395 ctx.fillStyle = '#00C';
396 ctx.shadowBlur = 0;
397 ctx.shadowColor = 'transparent';
399 ctx.stroke();
401 ctx.restore();
402 ctx.fill();
404 ctx.beginPath();
405 ctx.moveTo(36, 148);
406 ctx.quadraticCurveTo(66, 188, 120, 136);
407 ctx.closePath();
408 ctx.stroke();
410 ctx.beginPath();
411 ctx.shadowColor = '#993366AA';
412 ctx.shadowOffsetX = 8;
413 ctx.shadowBlur = 5;
414 ctx.setTransform(2, 0, -.5, 2.5, -40, 120);
415 ctx.rect(110, 10, 20, 20);
416 ctx.lineTo(110, 0);
417 ctx.resetTransform();
418 ctx.lineTo(220, 120);
419 ctx.stroke();
421 ctx.fillStyle = 'green';
422 ctx.font = '16pt Noto Mono';
423 ctx.fillText('This should be shadowed', 20, 80);
425 ctx.beginPath();
426 ctx.lineWidth = 6;
427 ctx.ellipse(10, 290, 30, 30, 0, 0, Math.PI * 2);
428 ctx.scale(2, 1);
429 ctx.moveTo(10, 290)
430 ctx.ellipse(10, 290, 30, 60, 0, 0, Math.PI * 2);
431 ctx.resetTransform();
432 ctx.shadowColor = '#993366AA';
433 ctx.scale(3, 1);
434 ctx.moveTo(10, 290)
435 ctx.ellipse(10, 290, 30, 90, 0, 0, Math.PI * 2);
436 ctx.stroke();
440 const ctx = canvas.getContext('2d'); constant
441 ctx.scale(1.1, 1.1);
442 ctx.translate(10, 10);
444 ctx.setLineDash([5, 3]);
446 ctx.fillStyle = 'rgba(200, 0, 100, 0.81)';
447 ctx.fillRect(20, 30, 100, 100);
449 ctx.globalAlpha = 0.81;
450 ctx.fillStyle = 'rgba(200, 0, 100, 1.0)';
451 ctx.fillRect(120, 30, 100, 100);
453 ctx.globalAlpha = 0.1;
455 ctx.fillStyle = 'rgba(200, 0, 100, 0.9)';
456 ctx.globalAlpha = 0.9;
458 ctx.clearRect(220, 30, 100, 100);
459 ctx.fillRect(220, 30, 100, 100);
461 ctx.fillRect(320, 30, 100, 100);
462 ctx.clearRect(330, 40, 80, 80);
464 ctx.strokeStyle = 'blue';
465 ctx.lineWidth = 3;
466 ctx.setLineDash([5, 3]);
467 ctx.strokeRect(20, 150, 100, 100);
468 ctx.setLineDash([50, 30]);
469 ctx.strokeRect(125, 150, 100, 100);
470 ctx.lineDashOffset = 25;
471 ctx.strokeRect(230, 150, 100, 100);
472 ctx.setLineDash([2, 5, 9]);
473 ctx.strokeRect(335, 150, 100, 100);
475 ctx.setLineDash([5, 2]);
476 ctx.moveTo(336, 400);
477 ctx.quadraticCurveTo(366, 488, 120, 450);
478 ctx.lineTo(300, 400);
479 ctx.stroke();
481 ctx.font = '36pt Noto Mono';
482 ctx.strokeText('Dashed', 20, 350);
483 ctx.fillText('Not Dashed', 20, 400);
487 const ctx = canvas.getContext('2d'); constant
489 const rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);
495 ctx.fillStyle = rgradient;
496 ctx.globalAlpha = 0.7;
497 ctx.fillRect(0,0,600,600);
498 ctx.globalAlpha = 0.95;
500 ctx.beginPath();
501 ctx.arc(300, 100, 90, 0, Math.PI*1.66);
502 ctx.closePath();
503 ctx.strokeStyle = 'yellow';
504 ctx.lineWidth = 5;
505 ctx.stroke();
506 ctx.save();
507 ctx.clip();
509 const lgradient = ctx.createLinearGradient(200, 20, 420, 40);
515 ctx.fillStyle = lgradient;
517 ctx.fillRect(200, 30, 200, 300);
519 ctx.restore();
520 ctx.fillRect(550, 550, 40, 40);
524 const ctx = canvas.getContext('2d'); constant
526 const grad = ctx.createLinearGradient(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
529 ctx.fillStyle = grad;
530 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
532 const iData = ctx.getImageData(400, 100, 200, 150);
536 ctx.putImageData(iData, 10, 10);
537 ctx.putImageData(iData, 350, 350, 100, 75, 45, 40);
538 ctx.strokeRect(350, 350, 200, 150);
540 const box = ctx.createImageData(20, 40);
541 ctx.putImageData(box, 10, 300);
542 const biggerBox = ctx.createImageData(iData);
543 ctx.putImageData(biggerBox, 10, 350);
549 const ctx = canvas.getContext('2d'); constant
551 ctx.fillStyle = 'white';
552 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
553 ctx.save();
554 ctx.translate(80, 80);
555 ctx.rotate((angle * Math.PI) / 180);
556 ctx.shadowOffsetX = 10;
557 ctx.shadowOffsetY = 10;
558 ctx.shadowColor = 'rgba(100,100,100,0.5)';
559 ctx.shadowBlur = 1;
560 ctx.fillStyle = 'black';
561 ctx.strokeStyle = 'red';
562 ctx.beginPath();
563 ctx.rect(-20, -20, 40, 40);
564 ctx.fill();
565 ctx.fillRect(30, 30, 40, 40);
566 ctx.strokeRect(30, -20, 40, 40);
567 ctx.fillText('text', -20, -30);
568 ctx.restore();
593 const ctx = canvas.getContext('2d'); constant
598 ctx.fillStyle = '#EEE';
599 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
600 ctx.lineWidth = 20;
601 ctx.scale(0.2, 0.4);
603 let pattern = ctx.createPattern(img, 'repeat');
604 ctx.fillStyle = pattern;
605 ctx.fillRect(0, 0, 1500, 750);
607 pattern = ctx.createPattern(img, 'repeat-x');
608 ctx.fillStyle = pattern;
609 ctx.fillRect(1500, 0, 3000, 750);
611 ctx.globalAlpha = 0.7
612 pattern = ctx.createPattern(img, 'repeat-y');
613 ctx.fillStyle = pattern;
614 ctx.fillRect(0, 750, 1500, 1500);
615 ctx.strokeRect(0, 750, 1500, 1500);
617 pattern = ctx.createPattern(img, 'no-repeat');
618 ctx.fillStyle = pattern;
620 ctx.fillRect(0, 0, 3000, 1500);
624 let ctx = canvas.getContext('2d'); variable
629 ctx.drawImage(img, 30, -200);
631 ctx.globalAlpha = 0.7
632 ctx.rotate(.1);
633 ctx.imageSmoothingQuality = 'medium';
634 ctx.drawImage(img, 200, 350, 150, 100);
635 ctx.rotate(-.2);
636 ctx.imageSmoothingEnabled = false;
637 ctx.drawImage(img, 100, 150, 400, 350, 10, 400, 150, 100);
642 const drawPoint = (ctx, x, y, color) => { argument
643 ctx.fillStyle = color;
644 ctx.fillRect(x, y, 1, 1);
661 testFn: (ctx, x, y) => ctx.isPointInPath(x * SCALE, y * SCALE, 'nonzero'),
668 testFn: (ctx, x, y) => ctx.isPointInPath(x * SCALE, y * SCALE, 'evenodd'),
675 testFn: (ctx, x, y) => ctx.isPointInStroke(x * SCALE, y * SCALE),
682 testFn: (ctx, x, y) => ctx.isPointInStroke(x * SCALE, y * SCALE),
686 const ctx = canvas.getContext('2d');
687 ctx.font = '20px Noto Mono';
689 ctx.fillText('path-nonzero', 60, 30);
690 ctx.fillText('path-evenodd', 300, 30);
691 ctx.fillText('stroke-1px-wide', 60, 260);
692 ctx.fillText('stroke-2px-wide', 300, 260);
693 ctx.fillText('purple is IN, orange is OUT', 20, 560);
696 ctx.scale(SCALE, SCALE);
698 ctx.beginPath();
702 ctx.fillStyle = '#AAA';
703 ctx.lineWidth = test.strokeWidth;
704 ctx.rect(5+xOffset, 5+yOffset, 20, 20);
705 ctx.arc(15+xOffset, 15+yOffset, 8, 0, Math.PI*2, false);
707 ctx.fill(test.fillType);
709 ctx.stroke();
718 if (test.testFn(ctx, x, y)) {
719 drawPoint(ctx, x, y, IN);
721 drawPoint(ctx, x, y, OUT);
757 const ctx = canvas.getContext('2d');
759 ctx.font = '20px monospace';
760 ctx.fillText('20 px monospace', 10, 30);
762 ctx.font = '2.0em BungeeNonSystem';
763 ctx.fillText('2.0em Bungee filled', 10, 80);
764 ctx.strokeText('2.0em Bungee stroked', 10, 130);
766 ctx.font = '40pt monospace';
767 ctx.strokeText('40pt monospace', 10, 200);
770 ctx.font = 'bold 45px BungeeNonSystem';
771 ctx.fillText('45px Bungee filled', 10, 260);
806 const ctx = canvas.getContext('2d');
843 ctx.lineWidth = 2;
844 ctx.scale(3.0, 3.0);
845 ctx.stroke(path);
846 ctx.stroke(clock);