feat: Turtle.get/set_ID ( Fixes #84 )

Using ID in Pattern and Canvas

Author: StartAutomating

Turtle.types.ps1xml

@@ -1281,12 +1281,12 @@ $this | Add-Member NoteProperty -Name '.BackgroundColor' -Value $value -Force
     $viewBox = $this.ViewBox
     $null, $null, $viewX, $viewY = $viewBox
     "<style>canvas {max-width: 100%; height: 100%}</style>"
-    "<canvas id='turtle-canvas' width='$($viewX + 1)' height='$($viewY + 1)'></canvas>"
+    "<canvas id='$($this.ID)-canvas' width='$($viewX + 1)' height='$($viewY + 1)'></canvas>"
 
     "<script>"    
 @"
 window.onload = async function() {
-  var canvas = document.getElementById('turtle-canvas');
+  var canvas = document.getElementById('$($this.ID)-canvas');
   var ctx = canvas.getContext('2d');
   ctx.strokeStyle = '$($this.Stroke)'
   ctx.lineWidth = '$(
@@ -1628,7 +1628,7 @@ $viewBox = $this.ViewBox
 $null, $null, $viewX, $viewY = $viewBox
 "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>"
 "<defs>"
-    "<pattern id='turtle-pattern' patternUnits='userSpaceOnUse' width='$viewX' height='$viewY' transform-origin='50% 50%'$(
+    "<pattern id='$($this.ID)-pattern' patternUnits='userSpaceOnUse' width='$viewX' height='$viewY' transform-origin='50% 50%'$(
         if ($this.PatternTransform) {
             " patternTransform='" + (
                 @(foreach ($key in $this.PatternTransform.Keys) {
@@ -1646,7 +1646,7 @@ $(
         "<rect width='10000%' height='10000%' x='-5000%' y='-5000%' fill='$($this.BackgroundColor)' transform-origin='50% 50%' />"
     }
 )
-"<rect width='10000%' height='10000%' x='-5000%' y='-5000%' fill='url(#turtle-pattern)' transform-origin='50% 50%' />"
+"<rect width='10000%' height='10000%' x='-5000%' y='-5000%' fill='url(#$($this.ID)-pattern)' transform-origin='50% 50%' />"
 "</svg>") 
 
 $segments -join '' -as [xml]