L'OQLF est passée.

BlazorCanvas/BlazorCanvas/Pages/Index.razor

@@ -8,39 +8,52 @@
 @inject IJSRuntime jsRuntime
 
 <header>
-    <label>Color: </label>
+    <h3>Canvas Communautaire!</h3>
+    <label>Couleur: </label>
     <select @bind="@currentcolor">
-        <option value="Black" selected>Black</option>
-        <option value="Red">Red</option>
-        <option value="Blue">Blue</option>
-        <option value="Gray">Gray</option>
+        <option value="Black" selected>Noir</option>
+        <option value="Red">Rouge</option>
+        <option value="Blue">Bleu</option>
+        <option value="Green">Vert</option>
+        <option value="Yellow">Jaune</option>
+        <option value="DarkRed">Bourgogne</option>
+        <option value="DarkBlue">Bleu nuit</option>
+        <option value="DarkGreen">Vert forêt</option>
+        <option value="LightBlue">Cyan</option>
+        <option value="LightGreen">Jade</option>
+        <option value="LightYellow">Jaune pâle</option>
+        <option value="Gray">Gris</option>
+        <option value="White">Blanc</option>
+    </select>
+    <label>Grosseur du trait: </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>
+        <option value="8">8</option>
+        <option value="16">16</option>
+        <option value="32">32</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> *@
 </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)
             return;
-        if (divCanvas.Id?.Length > 0)
-        {
+        if (divCanvas.Id?.Length > 0) {
             string data = await jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
                 new object[] { divCanvas });
             JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
@@ -49,15 +62,11 @@
                 mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
                 mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
             }
-
+            if (currentCanvasContext is null)
                 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);
         }
     }
 }