キャンバス変数のテキストでは、色は変化せず、黒のままです

Question

の色がキャンバスで影響を受けていないため、何かが間違っているようです。コード：

var l="Lorem Ipsum" 
l=l.replace(/%20/g," ");  
var index=l; 
if(index==-1); 

/*var elem = document.getElementById("wordCanv"); 
elem.fillStyle = "rgb(255, 0, 0)"; */  

var pixels=new Array(); 
var canv=$('canv'); 
var ctx=canv.getContext('2d'); 

ctx.fillStyle="blue"; 
ctx.strokeStyle="blue"; 
ctx.fill(); 
var wordCanv=$('wordCanv'); 
var wordCtx=wordCanv.getContext('2d'); 
wordCtx.fillStyle="blue"; 
wordCtx.strokeStyle="blue"; 
wordCtx.fill(); 
var mx=-1; 
var my=-1; 
var words=""; 
var txt=new Array(); 
var cw=0; 
var ch=0; 
var resolution=1; 
var n=0; 
var timerRunning=false; 
var resHalfFloor=0; 
var resHalfCeil=0; 

ご協力いただきますようお願い申し上げます。ありがとう！

Answer 1

まず、要素を選択していません。 $('canv')は、タグがcanv（要素なし）の要素を検索します。セレクタに#を追加してID：$('#canv')のように選択する必要があります。

第2に、$(selector)は、選択された要素の配列のようなオブジェクト（存在する場合）を返します。したがって、どの要素をどのようにインデックスするかを指定する必要があります。var canv = $('#canv')[0];。

第3に、fillは、描画されたばかりの図形をすべて塗りつぶします。キャンバス全体を塗りたい場合は、代わりにctx.fillRect(0, 0, canv.width, canv.height);を使用してください。

例：

// select the canvas properly 
 
var canv = $('#canv')[0]; 
 
// get it context 
 
var ctx = canv.getContext('2d'); 
 

 
// set the style 
 
ctx.fillStyle="blue"; 
 
ctx.strokeStyle="blue"; 
 

 
// fill the rect 
 
ctx.fillRect(0, 0, canv.width, canv.height);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id='canv'></canvas>