From 4b18317d358e35543d499fb034cebe4fe87ffe05 Mon Sep 17 00:00:00 2001
From: MarcEricMartel <marcericmartel@gmail.com>
Date: Sat, 11 Nov 2023 18:51:59 -0500
Subject: [PATCH] Added some more color!

---
 BlazorCanvas/BlazorCanvas/Pages/Index.razor | 38 +++++++++++----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/BlazorCanvas/BlazorCanvas/Pages/Index.razor b/BlazorCanvas/BlazorCanvas/Pages/Index.razor
index d1aeb09..ab4bf37 100644
--- a/BlazorCanvas/BlazorCanvas/Pages/Index.razor
+++ b/BlazorCanvas/BlazorCanvas/Pages/Index.razor
@@ -8,33 +8,38 @@
 @inject IJSRuntime jsRuntime
 
 <header>
+    <h3>On dessine en gang!</h3>
     <label>Color: </label>
     <select @bind="@currentcolor">
         <option value="Black" selected>Black</option>
         <option value="Red">Red</option>
         <option value="Blue">Blue</option>
+        <option value="Green">Green</option>
+        <option value="Yellow">Yellow</option>
+        <option value="DarkRed">Dark Red</option>
         <option value="Gray">Gray</option>
     </select>
-   @*  <input type="radio" name="color" checked="@(this.currentcolor == "Black")" onchange="@(() => this.currentcolor = "Black")" /><label>Black</label>
-    <input type="radio" name="color" checked="@(this.currentcolor == "Red")" onchange="@(() => this.currentcolor = "Red")"/><label>Red</label>
-    <input type="radio" name="color" checked="@(this.currentcolor == "Green")" onchange="@(() => this.currentcolor = "Green")" /><label>Green</label>
-    <input type="radio" name="color" checked="@(this.currentcolor == "Gray")" onchange="@(() => this.currentcolor = "Gray")" /><label>Gray</label> *@
+    <label>Point Size: </label>
+    <select @bind="@pointsize">
+        <option value="1" selected>1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+    </select>
 </header>
-<div @ref="divCanvas" @onmousemove="OnMouseMove">
+<div @ref="divCanvas" @onmousemove="OnMouseMove" style="border:1px solid #000000;">
     <BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas>
 </div>
 
-<h3>CanvasDrawing</h3>
-
 @code {
     ElementReference divCanvas;
-    BECanvasComponent myCanvas;
-    Canvas2DContext currentCanvasContext;
+    BECanvasComponent myCanvas = new();
+    Canvas2DContext? currentCanvasContext;
 
-    private string currentcolor { get; set; }// = "Black";
+    private string currentcolor { get; set; } = "Black";
+    private int pointsize { get; set; } = 1;
 
-    async void OnMouseMove(MouseEventArgs eventArgs)
-    {
+    async void OnMouseMove(MouseEventArgs eventArgs) {
         double mouseX = 0, mouseY = 0;
 
         if (eventArgs.Buttons == 0)
@@ -49,14 +54,11 @@
                 mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
                 mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
             }
+            if (currentCanvasContext is null)
+                currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
 
-            currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
-
-            //await currentCanvasContext.ClearRectAsync(0, 0, 800, 800);
             await currentCanvasContext.SetFillStyleAsync(currentcolor);
-            await currentCanvasContext.FillRectAsync(mouseX, mouseY, 1, 1);
-            //await currentCanvasContext.StrokeTextAsync("ClientX: " + mouseX +
-            //    "   Client Y: " + mouseY, 20, 20);
+            await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
 
         }
     }