fillStyle の値が変わる？

Question

実現したいこと

初めて質問します。
よろしくお願いします。

const ctx = document.getElementById("canvas").getContext("2d");
dataText = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18"
const splText = String(dataText).split(",");
let rgb = 0;
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
const r = splText [rgb];
const g = splText [(rgb + 1)];
const b = splText [(rgb + 2)];
ctx.beginPath();
ctx.fillStyle = "rgb(" + Number(r) + "," + Number(g) + "," + Number(b) + ")";
ctx.fillRect(j * 1, i * 1, 1, 1);
ctx.stroke();
rgb = rgb + 3;
}
}

で、dataText（数値は例） で指定した数値で塗りつぶしたいです。

発生している問題・分からないこと

//追記部分で取得した色（rgb）が fillStyle で塗りつぶした色（rgb数値）と違う時がある。
firefoxでしか検証していないのですが、
dataText でrgb(1,2,3)となっているのに取得した色はrgb(1,2,3)ではない数値になったりもします。
数値が変わってしまうのはどこのコードに問題があるのでしょうか。
それとも何かコードが足りていないのでしょうか。

該当のソースコード

 const ctx = document.getElementById("canvas").getContext("2d");
 dataText = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18"
 const splText = String(dataText).split(",");
 let rgb = 0;
 for (let i = 0; i < 6; i++) {
   for (let j = 0; j < 6; j++) {
　  const r = splText [rgb];
     const g = splText [(rgb + 1)];
     const b = splText [(rgb + 2)];
     ctx.beginPath();
     ctx.fillStyle = "rgb(" + Number(r) + "," + Number(g) + "," + Number(b) + ")";
     ctx.fillRect(j * 1, i * 1, 1, 1);
     ctx.stroke();

     //追記部分
     window.alert(Number(r) + "," + Number(g) + "," + Number(b));
     ctx.beginPath();
     const dataTest1 = ctx.getImageData(j * 1, i * 1, 1, 1);
     const dataTest2 = dataTest1.data;
     const dataTest3 = String(dataTest2).split(",", 3);
     window.alert(dataTest3);
     //

     rgb = rgb + 3;
   }
 }

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

いろいろ調べて試してみたのですが、違う数値がが出ることを解決できませんでした。

補足

特になし

Comments

[yambejp]

rgb1ってなんでしょう？とりあえず動くソースをお願いします

[Popo]

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。

[yambejp]

エラーにならないソースを提示ください

[Popo]

重ね重ね申し訳ありません。
バックアップ用の未修正のデータで記載していました。
修正しましたのでご確認お願いします。

[int32_t]

変数 rgb1 には何が入っているのでしょうか。

> 取得した色はrgb(1,2,3)ではない数値に

具体的にはどのような値になっているのでしょうか。

[Popo]

本当に申し訳ありません。
修正しました。
よろしくお願いします。

[int32_t]

変数rgbがconstなので今のコードは動きませんね。
それで、i j r g b がどういう値のときに dataTest3 の値がどのようになるのか、具体的な症状を教えてもらえませんか。

[Popo]

申し訳ありません。
rgbのconstをletに修正しました。

dataTest3 の値ですが、
ブラウザを起動→サイトに移動→JSを実行→ブラウザを閉じる
上記の行動をするたびに変わってしまいます。
例）一回目の行動だとJS実行時にはrgb(1,2,3)がrgb(2,2,3)になる
例）二回目の行動だとJS実行時にはrgb(1,2,3)がrgb(1,2,3)になる
例）三回目の行動だとJS実行時にはrgb(1,2,3)がrgb(0,3,3,)になる
という感じです。
一回目の行動をブラウザを閉じずにJSを再実行するとrgb(1,2,3)がrgb(2,2,3)と同じ結果が出ます。

[int32_t]

i==0 j==0 のときに問題が発生するのですね。
質問文のコードでは i==0 j==0 のときにそのような問題が起きるようには見えません。

質問者さんは質問文にあるコードそのまま追加コードなしで問題が発生するのですよね? Firefox以外のブラウザではどうなりますか。

[Popo]

chomeで実行してみました。
何度やっても正常に動作しました。。。

ブラウザの問題ということでしょうか。

[int32_t]

> ブラウザの問題ということでしょうか。

そうだと思います。

[Popo]

ブラウザ問題の可能性が高いのですね。
コメント、コードのご指摘、一緒に考えてくださり
ありがとうございます。

[juner]

firefox のバージョンはどのバージョンとなりますでしょうか？
現在のバージョンは 131.0.3 あたりと思われますが……。

[Popo]

バージョンは 131.0.3 (64 ビット) です。

Answer 1

問題点が明確ではないですね
たとえばこうするとどうでしょう？

let rgb = 0;
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
↓↓↓
let rgb = 0;
for (let i = 0; i < 6; i++) {
rgb=0;
for (let j = 0; j < 6; j++) {

全文

canvasに十分なサイズを取ってみる

<canvas id="canvas" width=100 height=100></canvas>
<script>
const ctx = document.getElementById("canvas").getContext("2d");
 dataText = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18"
 const splText = String(dataText).split(",");
 let rgb = 0;
 for (let i = 0; i < 6; i++) {
   rgb = 0;
   for (let j = 0; j < 6; j++) {
　  const r = splText [rgb];
     const g = splText [(rgb + 1)];
     const b = splText [(rgb + 2)];
     ctx.beginPath();
     ctx.fillStyle = "rgb(" + Number(r) + "," + Number(g) + "," + Number(b) + ")";
     ctx.fillRect(j * 1, i * 1, 1, 1);
     ctx.stroke();

     //追記部分
     window.alert(Number(r) + "," + Number(g) + "," + Number(b));
     ctx.beginPath();
     const dataTest1 = ctx.getImageData(j * 1, i * 1, 1, 1);
     const dataTest2 = dataTest1.data;
     const dataTest3 = String(dataTest2).split(",", 3);
     window.alert(dataTest3);
     //

     rgb = rgb + 3;
   }
 }
</script>

一覧表示

ちょっとだけリファクタリングして一覧表示にしました
これでi,jがいくつのときにどう値が違うか確認してみてください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const ctx = document.getElementById("canvas").getContext("2d");
  const dataText = "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18";
  const dataArray =dataText.split(",").map(Number);
  let rgb = 0;
  for (let i = 0; i < 6; i++) {
    rgb = 0;
    for (let j = 0; j < 6; j++) {
      output.value+=`i:${i}/j:${j}/`;
      const r = dataArray [rgb];
      const g = dataArray [rgb + 1];
      const b = dataArray [rgb + 2];
      ctx.beginPath();
      ctx.fillStyle = `rgb(${r},${g},${b})`;
      ctx.fillRect(j * 1, i * 1, 1, 1);
      ctx.stroke();
      
      output.value+=`${r},${g},${b}-`;
      ctx.beginPath();
      const dataTest1 = ctx.getImageData(j * 1, i * 1, 1, 1);
      const dataTest2 = dataTest1.data;
      const dataTest3 = String(dataTest2).split(",", 3);
      output.value+=dataTest3+"\n";
      rgb = rgb + 3;
    }
    output.value+="-------------------------\n";
  }
});

</script>

<canvas id="canvas" width=100 height=100></canvas>
<textarea id="output" rows=40 cols=40></textarea>

追加テスト

私の環境だと300*300の9万件やってもヒットしないですね
ただ、firefoxは処理がかなり重いです。chromeだと早いんですが・・・

<canvas id="canvas" width=300 height=300></canvas>
<script>
const ctx = document.getElementById("canvas").getContext("2d");
 dataText = "0,49,50,51,10,65,66,67,10,227,129,130,227,129,132,227,129,134";
 const splText = String(dataText).split(",");
 for (let i = 0; i < 300; i++) {
   for (let j = 0; j < 300; j+=3) {
     const r = splText [j%splText.length];
     const g = splText [(j+1)%splText.length];
     const b = splText [(j+2)%splText.length];
     ctx.beginPath();
     ctx.fillStyle = "rgb(" + Number(r) + "," + Number(g) + "," + Number(b) + ")";
     ctx.fillRect(j, i, 1, 1);
     ctx.stroke();
     const rgb1 = [r,g,b].map(x=>Number(x).toString(16).padStart(2,'0')).join('');

     ctx.beginPath();
     const dataTest1 = ctx.getImageData(j, i, 1, 1);
     const dataTest2 = dataTest1.data;
     const rgb2 = [...dataTest2].splice(0,3).map(x=>x.toString(16).padStart(2,'0')).join('');
     if(rgb1!==rgb2) console.log([i,j,rgb1,rgb2]);
   }
 }
</script>

Comments

[Popo]

回答ありがとうございます。試してみましたが解決できませんでした。

色数値が同じ時もありますが変わってしまう時も出てきます。
i = 0 のときはrgb(1,2,3)がrgb(1,2,3)と同じだったのに
i = 1 のときはrgb(1,2,3)がrgb(0,2,2)と変わってたり
実行するたびに変わってしまいます。

firefoxの設定も関係あるのでしょうか。。。

[yambejp]

canvasのサイズがおかしいのかもしれません
全文参考用に記載しておきましたのでコピペして動作を確認してみてください

[juner]

playground に転記するならこんな感じでしょうか？（ alert はつらいので下にリストで表示する様にしました。

https://livecodes.io/?x=id/hdgi4uye5p5

[Popo]

yambejpさん
他の方のご意見もあったのですが、chomeだと問題なく動作します。
ブラウザの問題の可能性も出てきたのですが、firefoxだけなのですかね。。。

junerさん
livecodesというサイトをはじめて知りました！
教えていただき、コードを作っていただき
ありがとうございます。

[yambejp]

Popoさん
わたしの環境：win10のfirefox131.0.3 (64 ビット)では問題ないですね

[juner]

Popo さん、 yambejp さん、
一つ目と二つ目 の値が変わるか確認して、変わったら 赤く塗る様に しましたが firefox でも発生しませんでした。

https://livecodes.io/?x=id/ea52ypqx4rd

発生しますでしょうか？それとも私の認識が間違っていますでしょうか？

※ livecodes で共有する場合は 右上の共有ボタンから Get short URL をすると 短いURLになるので共有するときはこっちを使った方がいいです（長すぎるURLは文字数制限とかに引っ掛かりやすいので

[yambejp]

デバッグしやすいように追記しておきました

[Popo]

junerさん
ありがとうございます。
こちらのコードですと私のほうでも正常に動作しました。

[Popo]

yambejpさん
ありがとうございます。
結果は以下の通りで、正常に動作しました。

i:0/j:0/1,2,3-1,2,3
i:0/j:1/4,5,6-4,5,6
i:0/j:2/7,8,9-7,8,9
i:0/j:3/10,11,12-10,11,12
i:0/j:4/13,14,15-13,14,15
i:0/j:5/16,17,18-16,17,18
-------------------------
i:1/j:0/1,2,3-1,2,3
i:1/j:1/4,5,6-4,5,6
i:1/j:2/7,8,9-7,8,9
i:1/j:3/10,11,12-10,11,12
i:1/j:4/13,14,15-13,14,15
i:1/j:5/16,17,18-16,17,18
-------------------------
i:2/j:0/1,2,3-1,2,3
i:2/j:1/4,5,6-4,5,6
i:2/j:2/7,8,9-7,8,9
i:2/j:3/10,11,12-10,11,12
i:2/j:4/13,14,15-13,14,15
i:2/j:5/16,17,18-16,17,18
-------------------------
i:3/j:0/1,2,3-1,2,3
i:3/j:1/4,5,6-4,5,6
i:3/j:2/7,8,9-7,8,9
i:3/j:3/10,11,12-10,11,12
i:3/j:4/13,14,15-13,14,15
i:3/j:5/16,17,18-16,17,18
-------------------------
i:4/j:0/1,2,3-1,2,3
i:4/j:1/4,5,6-4,4,6
i:4/j:2/7,8,9-7,8,9
i:4/j:3/10,11,12-10,11,12
i:4/j:4/13,14,15-13,14,15
i:4/j:5/16,17,18-16,17,18
-------------------------
i:5/j:0/1,2,3-1,2,3
i:5/j:1/4,5,6-4,5,6
i:5/j:2/7,8,9-7,8,9
i:5/j:3/10,11,12-10,11,12
i:5/j:4/13,14,15-13,14,15
i:5/j:5/16,17,18-16,17,18
-------------------------

[yambejp]

うーん普通に動作しているみたいですね。
ご自身のソースにoutput用のデバッグ処理を追加して検証はできないでしょうか？

[Popo]

yambejpさん
さきほどのoutput用のデバッグ処理を使わせていただき、数値をすこし変えて実行してみました。
変更した数値：0,49,50,51,10,65,66,67,10,227,129,130,227,129,132,227,129,134
結果は以下の通りなのですが、やはり数値が変わってしまっている箇所が出ます。
i:0/j:0/0,49,50-0,49,50
i:0/j:1/51,10,65-51,10,65
i:0/j:2/66,67,10-66,67,10
i:0/j:3/227,129,130-227,129,130
i:0/j:4/227,129,132-227,129,132
i:0/j:5/227,129,134-227,128,134
-------------------------
i:1/j:0/0,49,50-0,49,50
i:1/j:1/51,10,65-51,10,65
i:1/j:2/66,67,10-66,67,11
i:1/j:3/227,129,130-227,129,130
i:1/j:4/227,129,132-227,129,132
i:1/j:5/227,129,134-227,129,134
-------------------------
i:2/j:0/0,49,50-0,49,50
i:2/j:1/51,10,65-51,10,65
i:2/j:2/66,67,10-66,67,10
i:2/j:3/227,129,130-227,129,130
i:2/j:4/227,129,132-227,129,132
i:2/j:5/227,129,134-225,129,134
-------------------------
i:3/j:0/0,49,50-0,49,50
i:3/j:1/51,10,65-51,10,65
i:3/j:2/66,67,10-67,67,10
i:3/j:3/227,129,130-227,129,130
i:3/j:4/227,129,132-227,129,132
i:3/j:5/227,129,134-227,129,134
-------------------------
i:4/j:0/0,49,50-0,49,48
i:4/j:1/51,10,65-51,10,64
i:4/j:2/66,67,10-66,67,10
i:4/j:3/227,129,130-227,129,128
i:4/j:4/227,129,132-227,129,134
i:4/j:5/227,129,134-227,129,134
-------------------------
i:5/j:0/0,49,50-0,49,50
i:5/j:1/51,10,65-49,10,65
i:5/j:2/66,67,10-66,67,10
i:5/j:3/227,129,130-227,129,130
i:5/j:4/227,129,132-225,128,132
i:5/j:5/227,129,134-227,129,134
-------------------------
i:6/j:0/0,49,50-0,49,50
i:6/j:1/51,10,65-51,10,65
i:6/j:2/66,67,10-66,67,10
i:6/j:3/227,129,130-227,129,130
i:6/j:4/227,129,132-227,129,132
i:6/j:5/227,129,134-227,129,134
-------------------------

[juner]

その変わってしまう場合 の ソースを どこかの playground に載せて再現できる状態で共有できますでしょうか？（ livecodes に限らず codepen とか 好きなのでいいですが。

[yambejp]

再調整してみたのですがやはり環境依存なのかもしれません
テストしてみてください