将值从文本字段传递到HTML画布

Question

I'm looking to pass co-ordinates from a text field into HTML5 canvas. I'm using the code below to draw a rectangle on the canvas. The co-ordinates should be 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);
    }
}

I've tried passing them as a variable objectCoordinates but the rectangle is not drawn.

How can I pass what the user enters as co-ordinates?

Answer 1

Right now, objectCoordinates is a string. You need to extract the numbers the user is passing in:

var coordinateArray = objectCoordinates.split(",")

And then pass them in one by one:

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

Also, there's no need to initialize your variables with strings, especially the ones like canvas and context which end up not being strings at all.