canvasで思った色で線を書けない。

Question

canvasで思った色で線を書けない。

htmlでcanvasに決まった色で線を描写したいが
指定した色にならない。

該当のソースコード

<!-- html -->

<canvas id="canvas" width="1000" height="1000"></canvas>

<!-- javascript -->

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.globalAlpha = 1;
context.fillStyle = "#ff0000";
context.rect(70,30,40,50);
context.fill();

context.strokeStyle = "#ff0000";
context.strokeRect(20,30,40,50);

同じ赤を指定しているのですが
塗りつぶしの四角の場合、"#ff0000"
枠線の四角の場合、"#ff8080"
とstrokeStyleで色を指定するとRGBの値で128以下で表現できません。
(IE11, Firefox, chromeにて確認)

strokeやstrokeRectで色が変わってしまう
原因はなにが考えられるでしょうか？

Answer 1

整数座標に1px幅の線を描くと、ピクセルとピクセルの中間に線を描くことになり、結果として2px幅の半分の濃さの線になります。
座標を0.5pxずらしてください。

Comments

[kuma_kuma_]

ご指摘いただいた通り
context.strokeStyle = "#ff0000";
context.strokeRect(20.5,30.5,40,50);
x,y座標を0.5ずらした所
"#ff0000"で表示されました。
また
context.strokeStyle = "#ff0000";
context.strokeRect(20.5,30.5,40.5,50.5);
にて幅・高さをx・yと整数となるようにしたところ
右辺・下辺のみ"#ff8080"となりました。
ご指導ありがとうございます。

Answer 2

原因はなにが考えられるでしょうか？

R,G,B,A の各バイトで考えるとき、視覚で判断できないような小さな値は0に丸められます。
ImageDataをピクセル操作しているときに10以下の値で確認したことがあります
（詳細な閾値の確認はしていませんので、16 なども丸められるかもしれません）。

RGBの値で128以下で表現できません。

ご質問の #ff8080（G,B が 128）の場合、視覚で判別できるレベルですので
APIの使い方を再確認してください。

CanvasRenderingContext2D の基本操作

1. PATHを描く
2. 描いたPATHの境界(stroke)を着色するメソッド / path を描きつつ、境界を着色するメソッド
3. 描いたPATH内全域(fill)を着色するメソッド / path を描きつつ、塗りつぶすメソッド

着色は、stroke系/fill系メソッドの直前に設定したstrokeStyle/fillStyle （デフォルトは黒）
また、save(), restore() を使って The drawing state を記憶/復元できたはずです

Comments

[kuma_kuma_]

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeStyle = "#ff0000";
context.strokeRect(20,30,40,50);

残念ながら一番シンプルな上記記載方法でも現象が確認できました。
strokeStyle指定なしの場合"#808080"で表示されます。
save(), restore() も試しましたが
始めの状態から"#808080"の為変化はありませんでした。

ご指導ありがとうございます。