Как сделать границу при заполнении прямоугольника произвольного размера цветом?

Question

Я делаю очень простую программу рисования с использованием JavaScript.У меня есть несколько готовых инструментов для рисования, и я хочу иметь черную рамку вокруг прямоугольника.Прямоугольник заполнен случайным цветом.Как добавить границу?

Я попытался добавить два прямоугольника.И я пытался использовать strokeStyle и lineWidth, но пока безуспешно.

Код для заливки прямоугольника случайным цветом работает довольно хорошо.

  tools.rect = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      var x = Math.min(ev._x,  tool.x0),
          y = Math.min(ev._y,  tool.y0),
          w = Math.abs(ev._x - tool.x0),
          h = Math.abs(ev._y - tool.y0);

      context.clearRect(0, 0, canvas.width, canvas.height);

      if (!w || !h) {
        return;
      }
      context.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
      context.fillRect(x, y, w, h);

    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        drawCanvas();
      }
    };
  };

Но когда я пытаюсьдобавить эти строки после context.fillRect ...

context.strokeStyle = "#000";
context.lineWidth   = 3;

, на самом деле ничего не происходит.

Я думаю, возможно, что fillStyle и fillRect скрывают strokeStyle и lineWidth?Но я не знаю, как этого избежать?

Answer 1

Вам нужно позвонить strokeRect() после заполнения:

(...)
context.fillRect(x, y, w, h);
context.strokeStyle = "#000";
context.lineWidth = 3;
context.strokeRect(x, y, w, h);