Make WebAgg rubberband consistent with Qt backend

Co-authored-by: Elliott Sales de Andrade <quantum.analyst@gmail.com>

Author: lucasgruwez

lib/matplotlib/backends/web_backend/js/mpl.js

@@ -325,7 +325,6 @@ mpl.figure.prototype._init_canvas = function () {
     canvas_div.appendChild(rubberband_canvas);
 
     this.rubberband_context = rubberband_canvas.getContext('2d');
-    this.rubberband_context.strokeStyle = '#000000';
 
     this._resize_canvas = function (width, height, forward) {
         if (forward) {
@@ -469,19 +468,38 @@ mpl.figure.prototype.handle_rubberband = function (fig, msg) {
     y0 = Math.floor(y0) + 0.5;
     x1 = Math.floor(x1) + 0.5;
     y1 = Math.floor(y1) + 0.5;
-    var min_x = Math.min(x0, x1);
-    var min_y = Math.min(y0, y1);
-    var width = Math.abs(x1 - x0);
-    var height = Math.abs(y1 - y0);
 
-    fig.rubberband_context.clearRect(
+    var ctx = fig.rubberband_context;
+    ctx.clearRect(
         0,
         0,
         fig.canvas.width / fig.ratio,
         fig.canvas.height / fig.ratio
     );
 
-    fig.rubberband_context.strokeRect(min_x, min_y, width, height);
+    var drawRubberband = function () {
+        // Draw the lines from x0, y0 towards x1, y1 so that the
+        // dashes don't "jump" when moving the zoom box.
+        ctx.beginPath();
+        ctx.moveTo(x0, y0);
+        ctx.lineTo(x0, y1);
+        ctx.moveTo(x0, y0);
+        ctx.lineTo(x1, y0);
+        ctx.moveTo(x0, y1);
+        ctx.lineTo(x1, y1);
+        ctx.moveTo(x1, y0);
+        ctx.lineTo(x1, y1);
+        ctx.stroke();
+    };
+
+    fig.rubberband_context.lineWidth = 1;
+    fig.rubberband_context.setLineDash([3]);
+    fig.rubberband_context.lineDashOffset = 0;
+    fig.rubberband_context.strokeStyle = '#000000';
+    drawRubberband();
+    fig.rubberband_context.strokeStyle = '#ffffff';
+    fig.rubberband_context.lineDashOffset = 3;
+    drawRubberband();
 };
 
 mpl.figure.prototype.handle_figure_label = function (fig, msg) {