Javascript Canvas fillRect的X坐标错误

我正在尝试创建一个javascript函数，它将为光标下方画布的像素着色。运行时，彩色像素显示在浏览器的左边缘，尽管它们处于正确的垂直位置。以下是我的职能：

function writecolor(event) {
    var canvas = document.getElementById("colcan");
    var ctx = canvas.getContext("2d");
    var stylestr;
    var permuda = "0123456789ABCDEF";
    var os = $("#colcan").offset();
    var x= event.X-os.left;
    var y= event.clientY-os.top;
    console.log(x);
    var str = "#";

    for (x=0; x<6;x++) {
        str += permuda.charAt(Math.floor(Math.random()*16));
    }
    ctx.fillStyle = str;
    ctx.fillRect(x,y,1,1);
}

function setdim() {
    var canv = document.getElementById("colcan");
    canv.height=$(window).height();
    canv.width=$(window).width();
}

$(document).ready(function() {
             setdim();
              $(window).on("resize", function() {setdim()});
              $("#colcan").on("mousemove", function(event) { writecolor(event)});
              });

函数writecolor（事件）{
var canvas=document.getElementById（“colcan”）；
var ctx=canvas.getContext（“2d”）；
var-stylestr；
var permuda=“0123456789ABCDEF”；
var os=$（“#colcan”）.offset（）；
var x=event.x-os.left；
var y=event.clientY-os.top；
控制台日志（x）；
var str=“#”；
对于（x=0；x在控制台中，我得到的x坐标为NaN

它们不是“event.x”

您需要执行“event.clientX”来获取X坐标

还有一件事
首先定义存储值的变量x，
下一步就是运行一个for循环，X的值是6，这就是为什么事情没有解决的原因

如果在绘制画布之前控制x的值，可以看到它总是打印6。
你在运行一个for循环直到6…因此，每次鼠标移动你都会得到错误的X