pmurias · October 3, 2019 12:59
diff --git a/index.html b/index.html
 <html>
  <head>
  </head>
  <body>
    <canvas id='spaceship' height='500' width='500'></canvas>
  </body>
 </html>
diff --git a/main.p6 b/main.p6
 my $document = EVAL(:lang<JavaScript>, 'return document');

 my $canvas = $document.getElementById('spaceship');

 my $ctx = $canvas.getContext('2d');

 my \Path2D = EVAL(:lang<JavaScript>, 'return Path2D');

 class G {
  has $.ctx;
  has $!path = Path2D.new;

  has $!lastX;
  has $!lastY;

  method rgb($r, $g, $b) {
    sub convert($f) {
      floor(255 * $f);
    }
    my $css = "rgb({convert($r)}, {convert($b)}, {convert($g)})";
    $.ctx<strokeStyle> = $css;
    $.ctx<fillStyle> = $css;
  }

  method translate($x, $y) {
    $.ctx.translate($x.Num, $y.Num);
  }

  method move_to($x, $y) {
    $!lastX = $x;
    $!lastY = $y;

    $!path.moveTo($x.Num, $y.Num);
  }

  method line_to($x is copy, $y is copy, :$relative) {
    if $relative {
      $x = $!lastX + $x;
      $y = $!lastY + $y;
    }
    $!lastX = $x;
    $!lastY = $y;

    $!path.lineTo($x.Num, $y.Num);
  }

  method fill(:$preserve) {
    $.ctx.fill($!path);
    unless $preserve {
      $!path = Path2D.new;
    }
  }

  method stroke(:$preserve) {
    $.ctx.stroke($!path);
    unless $preserve {
      $!path = Path2D.new;
    }
  }

  method new_path() {
    $!path = Path2D.new;
  }

  method copy_path() {
    my $copyPath = Path2D.new;
    $copyPath.addPath($!path);
    $copyPath;
  }

  method append_path($path) {
    $!path.addPath($path);
  }

  method close_path() {
    $!path.closePath();
  }

  method scale($x, $y) {
    $.ctx.scale($x.Num, $y.Num);
  }

  method save() {
    $.ctx.save();
  }

  method restore() {
    $.ctx.restore();
  }

  method set_composite_operation($operation) {
    $.ctx<globalCompositeOperation> = $operation;
  }
 }


 say('#1');

 my $g = G.new(ctx => $ctx);

 given $g {
    .rgb(1e0, 1e0, 1e0);
    .translate(100, 130);

    .move_to(-30, 20);
    .line_to(60, 0, :relative);
    .line_to(-2, 7, :relative);
    .line_to(60, -15, :relative);
    .line_to(10, -20, :relative);
    .line_to(-60, -20, :relative);

    .line_to(-9, -10, :relative);
    .line_to(-14, 5, :relative);
    .line_to(-30, 0, :relative);
    .line_to(-14, -5, :relative);
    .line_to(-9, 10, :relative);

    .line_to(-60, 20, :relative);
    .line_to(10, 20, :relative);
    .line_to(60, 15, :relative);
    .line_to(-2, -7, :relative);

    .close_path;

    .rgb(0.5e0, 0.5e0, 0.5e0);
    .fill() :preserve;

    my $outlinepath = .copy_path;

    .rgb(1e0, 1e0, 1e0);

    .new_path();

    for ^2 -> $i {
        .move_to(-15 + $i * 28, 20);
        .line_to(-5, 10, :relative);
        .line_to(12, 0, :relative);
        .line_to(-5, -10, :relative);
    }

    .stroke;

    for ^2 -> $i {
        .save;
        .scale(-1, 1) if $i;
        .set_composite_operation('source-atop');
        .rgb(1e0, 0e0, 0e0);
        .move_to(50, 30);
        .line_to(20, 0, :relative);
        .line_to(10, -60, :relative);
        .line_to(-30, 0, :relative);
        .close_path;
        .fill;
        .restore;
    }

    .append_path($outlinepath);
    .rgb(1e0, 1e0, 1e0);
    .stroke();


    .move_to(-10, 0);
    .line_to(10, 0);
    .line_to(20, -20);
    .line_to(10, -100);
    .line_to(-10, -100);
    .line_to(-20, -20);
    .line_to(-10, 0);

    .rgb(0.5e0, 0.5e0, 0.5e0);
    .fill :preserve;

    .rgb(1e0, 1e0, 1e0);
    .stroke;
 }
	<html>
	<head>
	</head>
	<body>
	<canvas id='spaceship' height='500' width='500'></canvas>
	</body>
	</html>
	my $document = EVAL(:lang<JavaScript>, 'return document');

	my $canvas = $document.getElementById('spaceship');

	my $ctx = $canvas.getContext('2d');

	my \Path2D = EVAL(:lang<JavaScript>, 'return Path2D');

	class G {
	has $.ctx;
	has $!path = Path2D.new;

	has $!lastX;
	has $!lastY;

	method rgb($r, $g, $b) {
	sub convert($f) {
	floor(255 * $f);
	}
	my $css = "rgb({convert($r)}, {convert($b)}, {convert($g)})";
	$.ctx<strokeStyle> = $css;
	$.ctx<fillStyle> = $css;
	}

	method translate($x, $y) {
	$.ctx.translate($x.Num, $y.Num);
	}

	method move_to($x, $y) {
	$!lastX = $x;
	$!lastY = $y;

	$!path.moveTo($x.Num, $y.Num);
	}

	method line_to($x is copy, $y is copy, :$relative) {
	if $relative {
	$x = $!lastX + $x;
	$y = $!lastY + $y;
	}
	$!lastX = $x;
	$!lastY = $y;

	$!path.lineTo($x.Num, $y.Num);
	}

	method fill(:$preserve) {
	$.ctx.fill($!path);
	unless $preserve {
	$!path = Path2D.new;
	}
	}

	method stroke(:$preserve) {
	$.ctx.stroke($!path);
	unless $preserve {
	$!path = Path2D.new;
	}
	}

	method new_path() {
	$!path = Path2D.new;
	}

	method copy_path() {
	my $copyPath = Path2D.new;
	$copyPath.addPath($!path);
	$copyPath;
	}

	method append_path($path) {
	$!path.addPath($path);
	}

	method close_path() {
	$!path.closePath();
	}

	method scale($x, $y) {
	$.ctx.scale($x.Num, $y.Num);
	}

	method save() {
	$.ctx.save();
	}

	method restore() {
	$.ctx.restore();
	}

	method set_composite_operation($operation) {
	$.ctx<globalCompositeOperation> = $operation;
	}
	}


	say('#1');

	my $g = G.new(ctx => $ctx);

	given $g {
	.rgb(1e0, 1e0, 1e0);
	.translate(100, 130);

	.move_to(-30, 20);
	.line_to(60, 0, :relative);
	.line_to(-2, 7, :relative);
	.line_to(60, -15, :relative);
	.line_to(10, -20, :relative);
	.line_to(-60, -20, :relative);

	.line_to(-9, -10, :relative);
	.line_to(-14, 5, :relative);
	.line_to(-30, 0, :relative);
	.line_to(-14, -5, :relative);
	.line_to(-9, 10, :relative);

	.line_to(-60, 20, :relative);
	.line_to(10, 20, :relative);
	.line_to(60, 15, :relative);
	.line_to(-2, -7, :relative);

	.close_path;

	.rgb(0.5e0, 0.5e0, 0.5e0);
	.fill() :preserve;

	my $outlinepath = .copy_path;

	.rgb(1e0, 1e0, 1e0);

	.new_path();

	for ^2 -> $i {
	.move_to(-15 + $i * 28, 20);
	.line_to(-5, 10, :relative);
	.line_to(12, 0, :relative);
	.line_to(-5, -10, :relative);
	}

	.stroke;

	for ^2 -> $i {
	.save;
	.scale(-1, 1) if $i;
	.set_composite_operation('source-atop');
	.rgb(1e0, 0e0, 0e0);
	.move_to(50, 30);
	.line_to(20, 0, :relative);
	.line_to(10, -60, :relative);
	.line_to(-30, 0, :relative);
	.close_path;
	.fill;
	.restore;
	}

	.append_path($outlinepath);
	.rgb(1e0, 1e0, 1e0);
	.stroke();


	.move_to(-10, 0);
	.line_to(10, 0);
	.line_to(20, -20);
	.line_to(10, -100);
	.line_to(-10, -100);
	.line_to(-20, -20);
	.line_to(-10, 0);

	.rgb(0.5e0, 0.5e0, 0.5e0);
	.fill :preserve;

	.rgb(1e0, 1e0, 1e0);
	.stroke;
	}