Передача значений из текстового поля в HTML-холст

Question

Я ищу, чтобы передать координаты из текстового поля в холст HTML5. Я использую следующий код, чтобы нарисовать прямоугольник на холсте. Координаты должны быть 0,0,50,50

function displayObject(currentObject){ 
    var imageNumber = $(currentObject).find('div.objectDd input.objectImageNum').val(); 
    var objectCoordinates = $(currentObject).find('div.objectDd input.objectCoordinates').val(); 
    var imageId = ""; 
    var canvasId = ""; 
    var context = ""; 
    var canvas = ""; 


    if(imageNumber != "" && objectCoordinates != ""){ 
     imageId = "#imgNum".concat(imageNumber); 
     canvasId = $('#objectData').find('#miImages '+imageId+' .imageContainer canvas').attr("id"); 
     canvas = document.getElementById(canvasId); 
     context = canvas.getContext("2d"); 
     context.fillStyle = "#FF0000"; 
     context.fillRect(objectCoordinates); 
    } 
} 

Я попытался передать их в качестве переменной objectCoordinates, но прямоугольник не рисуется.

Как передать то, что пользователь вводит в качестве координат?

Answer 1

Прямо сейчас, объектКоординаты - это строка. Вам нужно извлечь номера пользователь проходит в:

var coordinateArray = objectCoordinates.split(",") 

, а затем передать их в один за другим:

context.fillRect(coordinateArray[0], 
       coordinateArray[1], 
       coordinateArray[2], 
       coordinateArray[3]) 

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