Ход контекста контекста() делает прозрачную рамку, а не полностью непрозрачной?

Question

У меня был быстрый вопрос относительно функции ctx stroke наряду с использованием rect. В моем коде я нарисую rect и залейте его красным. Я хочу также добавить зеленый границы вокруг rect, но когда я использую stroke, кажется, что создается прозрачная рамка, а не сплошная линия. Почему он делает это по умолчанию?

Img результата:

Мой код:

 var ctx = Canvas.ctx; 

     ctx.beginPath(); 
     ctx.rect(this.x, this.y, this.width, this.height); 

     /* 
     * CONTAINER 
     */ 
     ctx.fillStyle = this.primaryColor; 
     ctx.fill(); 

     /* 
     * CONTAINER BAR 
     */ 
     if(this.borderColor){ 
      ctx.strokeStyle = this.borderColor; 
      ctx.stroke(); 
     } 

     /* 
     * INNER BAR 
     */ 
     var per = this.percent; 

     if(per > 0){ 
      //the width of the actual loading bar that appears 
      //inside the entire box 
      var innerWidth = Math.floor(this.width*(per/100)); 

      ctx.fillStyle = this.secondaryColor; 
      ctx.fillRect(this.x+1, this.y+1, innerWidth-2, this.height-2); 
     } 

     /* 
     * TEXT 
     */ 
     if(this.text){ 
      ctx.textAlign = this.textAlign; 
      ctx.font = this.font; 
      ctx.fillStyle = this.textColor; 
      ctx.fillText(this.text, this.textX, this.textY); 
     } 

Answer 1

Холст рисует свои линии трансзональных координат ваш пиксель. Таким образом, вертикальная линия lineWidth = 1 при x = 20 будет отбираться с 19,5 до 20,5.

Чтобы уточнить ваш прямоугольник следующие 2 подсказки:

• Назначьте Прямоугольник по х, у, ширина, высота, как целые числа

• Комплект перевода (0.50,0.50) перед нанесением на прямоугольник (с) и неустановленный перевод (-0.50, -0.50) затем

Подробнее о "почему?" здесь:

http://diveintohtml5.info/canvas.html

Обратите внимание, что эти подсказки помогают с вертикальными & горизонтальными линиями, но не помогают угловым линиям & кривых.