Lines Matching refs:ctx
280 let ctx = canvas.getContext('2d');
281 ctx.scale(3.0, 3.0);
282 ctx.moveTo(20, 5);
283 ctx.lineTo(30, 20);
284 ctx.lineTo(40, 10);
285 ctx.lineTo(50, 20);
286 ctx.lineTo(60, 0);
287 ctx.lineTo(20, 5);
289 ctx.moveTo(20, 80);
290 ctx.bezierCurveTo(90, 10, 160, 150, 190, 10);
292 ctx.moveTo(36, 148);
293 ctx.quadraticCurveTo(66, 188, 120, 136);
294 ctx.lineTo(36, 148);
296 ctx.rect(5, 170, 20, 25);
298 ctx.moveTo(150, 180);
299 ctx.arcTo(150, 100, 50, 200, 20);
300 ctx.lineTo(160, 160);
302 ctx.moveTo(20, 120);
303 ctx.arc(20, 120, 18, 0, 1.75 * Math.PI);
304 ctx.lineTo(20, 120);
306 ctx.moveTo(150, 5);
307 ctx.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI)
309 ctx.lineWidth = 2;
310 ctx.stroke();
313 ctx.beginPath();
314 ctx.arc(50, 100, 10, Math.PI, -Math.PI/2);
315 ctx.stroke();
316 ctx.beginPath();
317 ctx.arc(75, 100, 10, Math.PI, -Math.PI/2, true);
318 ctx.stroke();
319 ctx.beginPath();
320 ctx.arc(100, 100, 10, Math.PI, 100.1 * Math.PI, true);
321 ctx.stroke();
322 ctx.beginPath();
323 ctx.arc(125, 100, 10, Math.PI, 100.1 * Math.PI, false);
324 ctx.stroke();
325 ctx.beginPath();
326 ctx.ellipse(155, 100, 10, 15, Math.PI/8, 100.1 * Math.PI, Math.PI, true);
327 ctx.stroke();
328 ctx.beginPath();
329 ctx.ellipse(180, 100, 10, 15, Math.PI/8, Math.PI, 100.1 * Math.PI, true);
330 ctx.stroke();
338 let ctx = canvas.getContext('2d');
339 ctx.rect(10, 10, 20, 20);
341 ctx.scale(2.0, 4.0);
342 ctx.rect(30, 10, 20, 20);
343 ctx.resetTransform();
345 ctx.rotate(Math.PI / 3);
346 ctx.rect(50, 10, 20, 20);
347 ctx.resetTransform();
349 ctx.translate(30, -2);
350 ctx.rect(70, 10, 20, 20);
351 ctx.resetTransform();
353 ctx.translate(60, 0);
354 ctx.rotate(Math.PI / 6);
355 ctx.transform(1.5, 0, 0, 0.5, 0, 0, 0); // effectively scale
356 ctx.rect(90, 10, 20, 20);
357 ctx.resetTransform();
359 ctx.save();
360 ctx.setTransform(2, 0, -.5, 2.5, -40, 120);
361 ctx.rect(110, 10, 20, 20);
362 ctx.lineTo(110, 0);
363 ctx.restore();
364 ctx.lineTo(220, 120);
366 ctx.scale(3.0, 3.0);
367 ctx.font = '6pt Noto Mono';
368 ctx.fillText('This text should be huge', 10, 80);
369 ctx.resetTransform();
371 ctx.strokeStyle = 'black';
372 ctx.lineWidth = 2;
373 ctx.stroke();
375 ctx.beginPath();
376 ctx.moveTo(250, 30);
377 ctx.lineTo(250, 80);
378 ctx.scale(3.0, 3.0);
379 ctx.lineTo(280/3, 90/3);
380 ctx.closePath();
381 ctx.strokeStyle = 'black';
382 ctx.lineWidth = 5;
383 ctx.stroke();
391 let ctx = canvas.getContext('2d');
392 ctx.strokeStyle = '#000';
393 ctx.fillStyle = '#CCC';
394 ctx.shadowColor = 'rebeccapurple';
395 ctx.shadowBlur = 1;
396 ctx.shadowOffsetX = 3;
397 ctx.shadowOffsetY = -8;
398 ctx.rect(10, 10, 30, 30);
400 ctx.save();
401 ctx.strokeStyle = '#C00';
402 ctx.fillStyle = '#00C';
403 ctx.shadowBlur = 0;
404 ctx.shadowColor = 'transparent';
406 ctx.stroke();
408 ctx.restore();
409 ctx.fill();
411 ctx.beginPath();
412 ctx.moveTo(36, 148);
413 ctx.quadraticCurveTo(66, 188, 120, 136);
414 ctx.closePath();
415 ctx.stroke();
417 ctx.beginPath();
418 ctx.shadowColor = '#993366AA';
419 ctx.shadowOffsetX = 8;
420 ctx.shadowBlur = 5;
421 ctx.setTransform(2, 0, -.5, 2.5, -40, 120);
422 ctx.rect(110, 10, 20, 20);
423 ctx.lineTo(110, 0);
424 ctx.resetTransform();
425 ctx.lineTo(220, 120);
426 ctx.stroke();
428 ctx.fillStyle = 'green';
429 ctx.font = '16pt Noto Mono';
430 ctx.fillText('This should be shadowed', 20, 80);
432 ctx.beginPath();
433 ctx.lineWidth = 6;
434 ctx.ellipse(10, 290, 30, 30, 0, 0, Math.PI * 2);
435 ctx.scale(2, 1);
436 ctx.moveTo(10, 290)
437 ctx.ellipse(10, 290, 30, 60, 0, 0, Math.PI * 2);
438 ctx.resetTransform();
439 ctx.shadowColor = '#993366AA';
440 ctx.scale(3, 1);
441 ctx.moveTo(10, 290)
442 ctx.ellipse(10, 290, 30, 90, 0, 0, Math.PI * 2);
443 ctx.stroke();
451 let ctx = canvas.getContext('2d');
452 ctx.scale(1.1, 1.1);
453 ctx.translate(10, 10);
455 ctx.setLineDash([5, 3]);
457 ctx.fillStyle = 'rgba(200, 0, 100, 0.81)';
458 ctx.fillRect(20, 30, 100, 100);
460 ctx.globalAlpha = 0.81;
461 ctx.fillStyle = 'rgba(200, 0, 100, 1.0)';
462 ctx.fillRect(120, 30, 100, 100);
464 ctx.globalAlpha = 0.1;
466 ctx.fillStyle = 'rgba(200, 0, 100, 0.9)';
467 ctx.globalAlpha = 0.9;
469 ctx.clearRect(220, 30, 100, 100);
470 ctx.fillRect(220, 30, 100, 100);
472 ctx.fillRect(320, 30, 100, 100);
473 ctx.clearRect(330, 40, 80, 80);
475 ctx.strokeStyle = 'blue';
476 ctx.lineWidth = 3;
477 ctx.setLineDash([5, 3]);
478 ctx.strokeRect(20, 150, 100, 100);
479 ctx.setLineDash([50, 30]);
480 ctx.strokeRect(125, 150, 100, 100);
481 ctx.lineDashOffset = 25;
482 ctx.strokeRect(230, 150, 100, 100);
483 ctx.setLineDash([2, 5, 9]);
484 ctx.strokeRect(335, 150, 100, 100);
486 ctx.setLineDash([5, 2]);
487 ctx.moveTo(336, 400);
488 ctx.quadraticCurveTo(366, 488, 120, 450);
489 ctx.lineTo(300, 400);
490 ctx.stroke();
492 ctx.font = '36pt Noto Mono';
493 ctx.strokeText('Dashed', 20, 350);
494 ctx.fillText('Not Dashed', 20, 400);
502 const ctx = canvas.getContext('2d');
504 const rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300);
510 ctx.fillStyle = rgradient;
511 ctx.globalAlpha = 0.7;
512 ctx.fillRect(0,0,600,600);
513 ctx.globalAlpha = 0.95;
515 ctx.beginPath();
516 ctx.arc(300, 100, 90, 0, Math.PI*1.66);
517 ctx.closePath();
518 ctx.strokeStyle = 'yellow';
519 ctx.lineWidth = 5;
520 ctx.stroke();
521 ctx.save();
522 ctx.clip();
524 const lgradient = ctx.createLinearGradient(200, 20, 420, 40);
530 ctx.fillStyle = lgradient;
532 ctx.fillRect(200, 30, 200, 300);
534 ctx.restore();
535 ctx.fillRect(550, 550, 40, 40);
558 let ctx = canvas.getContext('2d');
563 ctx.drawImage(img, 30, -200);
565 ctx.globalAlpha = 0.7
566 ctx.rotate(.1);
567 ctx.imageSmoothingQuality = 'medium';
568 ctx.drawImage(img, 200, 350, 150, 100);
569 ctx.rotate(-.2);
570 ctx.imageSmoothingEnabled = false;
571 ctx.drawImage(img, 100, 150, 400, 350, 10, 400, 150, 100);
580 let ctx = canvas.getContext('2d');
582 let grad = ctx.createLinearGradient(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
585 ctx.fillStyle = grad;
586 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
588 let iData = ctx.getImageData(400, 100, 200, 150);
592 ctx.putImageData(iData, 10, 10);
593 ctx.putImageData(iData, 350, 350, 100, 75, 45, 40);
594 ctx.strokeRect(350, 350, 200, 150);
596 let box = ctx.createImageData(20, 40);
597 ctx.putImageData(box, 10, 300);
598 let biggerBox = ctx.createImageData(iData);
599 ctx.putImageData(biggerBox, 10, 350);
624 let ctx = canvas.getContext('2d');
629 ctx.fillStyle = '#EEE';
630 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
631 ctx.lineWidth = 20;
632 ctx.scale(0.2, 0.4);
634 let pattern = ctx.createPattern(img, 'repeat');
635 ctx.fillStyle = pattern;
636 ctx.fillRect(0, 0, 1500, 750);
638 pattern = ctx.createPattern(img, 'repeat-x');
639 ctx.fillStyle = pattern;
640 ctx.fillRect(1500, 0, 3000, 750);
642 ctx.globalAlpha = 0.7
643 pattern = ctx.createPattern(img, 'repeat-y');
644 ctx.fillStyle = pattern;
645 ctx.fillRect(0, 750, 1500, 1500);
646 ctx.strokeRect(0, 750, 1500, 1500);
648 pattern = ctx.createPattern(img, 'no-repeat');
649 ctx.fillStyle = pattern;
651 ctx.fillRect(0, 0, 3000, 1500);
659 function drawPoint(ctx, x, y, color) { argument
660 ctx.fillStyle = color;
661 ctx.fillRect(x, y, 1, 1);
678 testFn: (ctx, x, y) => ctx.isPointInPath(x * SCALE, y * SCALE, 'nonzero'),
685 testFn: (ctx, x, y) => ctx.isPointInPath(x * SCALE, y * SCALE, 'evenodd'),
692 testFn: (ctx, x, y) => ctx.isPointInStroke(x * SCALE, y * SCALE),
699 testFn: (ctx, x, y) => ctx.isPointInStroke(x * SCALE, y * SCALE),
703 let ctx = canvas.getContext('2d');
704 ctx.font = '20px Noto Mono';
706 ctx.fillText('path-nonzero', 60, 30);
707 ctx.fillText('path-evenodd', 300, 30);
708 ctx.fillText('stroke-1px-wide', 60, 260);
709 ctx.fillText('stroke-2px-wide', 300, 260);
710 ctx.fillText('purple is IN, orange is OUT', 20, 560);
713 ctx.scale(SCALE, SCALE);
715 ctx.beginPath();
719 ctx.fillStyle = '#AAA';
720 ctx.lineWidth = test.strokeWidth;
721 ctx.rect(5+xOffset, 5+yOffset, 20, 20);
722 ctx.arc(15+xOffset, 15+yOffset, 8, 0, Math.PI*2, false);
724 ctx.fill(test.fillType);
726 ctx.stroke();
735 if (test.testFn(ctx, x, y)) {
736 drawPoint(ctx, x, y, IN);
738 drawPoint(ctx, x, y, OUT);
773 let ctx = canvas.getContext('2d');
775 ctx.font = '20px monospace';
776 ctx.fillText('20 px monospace', 10, 30);
778 ctx.font = '2.0em BungeeNonSystem';
779 ctx.fillText('2.0em Bungee filled', 10, 80);
780 ctx.strokeText('2.0em Bungee stroked', 10, 130);
782 ctx.font = '40pt monospace';
783 ctx.strokeText('40pt monospace', 10, 200);
786 ctx.font = 'bold 45px BungeeNonSystem';
787 ctx.fillText('45px Bungee filled', 10, 260);
828 let ctx = canvas.getContext('2d');
865 ctx.lineWidth = 2;
866 ctx.scale(3.0, 3.0);
867 ctx.stroke(path);
868 ctx.stroke(clock);