I'm stuck with my code.

Problem: I have canvas and inside it I draw the lines. And after I finished I want that lines to stay in the right place where i left that(before reload website). So I need to send that canvas to mysql data base. But here I stuck. Did I first need to create .png image and then try to send that image information to database? or somehow I can send it right off from code to database by using AJAX? I read a lot of information and I am confused right now.

If I will use method HTMLgetImageData() and HTMLputImageData() then I need to create some real image in my server? or I can take straight from the canvas? and send to mysql databse? :)

so now I have Canvas in html and some script for drawing the lines:

$(".widget_body").on("mousedown", "canvas", function() {

    var id = $(this).attr("id");
    var canvas = document.getElementById(id);
    var canvas,
        context,
        dragging = false,
        dragStartLocation,
        snapshot;

    fitToContainer(canvas);

    function fitToContainer(canvas){
      // Make it visually fill the positioned parent
      canvas.style.width ='100%';
      canvas.style.height='100%';
      // ...then set the internal size to match
      canvas.width  = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }


    function getCanvasCoordinates(event) {
        var x = event.clientX - canvas.getBoundingClientRect().left,
            y = event.clientY - canvas.getBoundingClientRect().top;

        return {x: x, y: y};
    }

    function takeSnapshot() {
        snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
    }

    function restoreSnapshot() {
        context.putImageData(snapshot, 0, 0);
    }


    function drawLine(position) {
        context.beginPath();
        context.moveTo(dragStartLocation.x, dragStartLocation.y);
        context.lineTo(position.x, position.y);
        context.stroke();
    }

    function dragStart(event) {
        dragging = true;
        dragStartLocation = getCanvasCoordinates(event);
        takeSnapshot();
    }

    function drag(event) {
        var position;
        if (dragging === true) {
            restoreSnapshot();
            position = getCanvasCoordinates(event);
            drawLine(position);
        }
    }

    function dragStop(event) {
        dragging = false;
        restoreSnapshot();
        var position = getCanvasCoordinates(event);
        drawLine(position);
    }

    function clearCanvas(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }


    context = canvas.getContext('2d');
    context.strokeStyle = 'purple';
    context.lineWidth = 4;
    context.lineCap = 'round';

    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);
    canvas.addEventListener('dblclick', clearCanvas, false);
    });

Maybe somebody can suggest something to me? Maybe something about next steps?What should I have to do from this moment?

I'm stuck with my code.

Problem: I have canvas and inside it I draw the lines. And after I finished I want that lines to stay in the right place where i left that(before reload website). So I need to send that canvas to mysql data base. But here I stuck. Did I first need to create .png image and then try to send that image information to database? or somehow I can send it right off from code to database by using AJAX? I read a lot of information and I am confused right now.

If I will use method HTMLgetImageData() and HTMLputImageData() then I need to create some real image in my server? or I can take straight from the canvas? and send to mysql databse? :)

so now I have Canvas in html and some script for drawing the lines:

$(".widget_body").on("mousedown", "canvas", function() {

    var id = $(this).attr("id");
    var canvas = document.getElementById(id);
    var canvas,
        context,
        dragging = false,
        dragStartLocation,
        snapshot;

    fitToContainer(canvas);

    function fitToContainer(canvas){
      // Make it visually fill the positioned parent
      canvas.style.width ='100%';
      canvas.style.height='100%';
      // ...then set the internal size to match
      canvas.width  = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    }


    function getCanvasCoordinates(event) {
        var x = event.clientX - canvas.getBoundingClientRect().left,
            y = event.clientY - canvas.getBoundingClientRect().top;

        return {x: x, y: y};
    }

    function takeSnapshot() {
        snapshot = context.getImageData(0, 0, canvas.width, canvas.height);
    }

    function restoreSnapshot() {
        context.putImageData(snapshot, 0, 0);
    }


    function drawLine(position) {
        context.beginPath();
        context.moveTo(dragStartLocation.x, dragStartLocation.y);
        context.lineTo(position.x, position.y);
        context.stroke();
    }

    function dragStart(event) {
        dragging = true;
        dragStartLocation = getCanvasCoordinates(event);
        takeSnapshot();
    }

    function drag(event) {
        var position;
        if (dragging === true) {
            restoreSnapshot();
            position = getCanvasCoordinates(event);
            drawLine(position);
        }
    }

    function dragStop(event) {
        dragging = false;
        restoreSnapshot();
        var position = getCanvasCoordinates(event);
        drawLine(position);
    }

    function clearCanvas(event) {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }


    context = canvas.getContext('2d');
    context.strokeStyle = 'purple';
    context.lineWidth = 4;
    context.lineCap = 'round';

    canvas.addEventListener('mousedown', dragStart, false);
    canvas.addEventListener('mousemove', drag, false);
    canvas.addEventListener('mouseup', dragStop, false);
    canvas.addEventListener('dblclick', clearCanvas, false);
    });

Maybe somebody can suggest something to me? Maybe something about next steps?What should I have to do from this moment?

• javascript
• php
• mysql
• canvas
• html5-canvas

Share Improve this question Follow edited Apr 1, 2016 at 13:53 Skyluk asked Apr 1, 2016 at 13:43 SkylukSkyluk 6944 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Well, it depends on whether you're saving the Canvas as a single image or if you're saving each ponent of it (such as lines, squares, etc).

If you're saving it as a single image, it will be easier to just save the Data URL to your database. Otherwise, create JavaScript objects containing the properties and values of each shape, e.g.:

var line =
{
    Name: "Line",
    Color: "#3D4AEE",
    Shadow: "NULL"
    Length: "",
    Point: "130, 120"
}

Then convert the object into a JSON String:

var JSONLine = JSON.stringify(line);

Now you have something you can insert into the database.

Now, when you need to retrieve this from the database, so you can redraw it in the browser, all you need to do is lookup the "design", get all the bits that make up that design and redraw them to the Canvas, using the properties of the shapes that you saved.

I'll leave it up to you to figure out how to structure your database to acmodate the different types of shapes, and their relationships to "designs" that are created.

1. You could save the coordinates in a database without reloading the page using AJAX and then fetch the coordinates via AJAX and set them dynamicly in the Javascript. If you want to use a JS Library that makes AJAX-requests easier to use, I remend jQuery http://api.jquery./jquery.ajax/

2. You could convert the canvas to an image using something like

function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}

And then save the image in a database. However, you won't be able to change the canvas this way, it will be an image. The first way allows you to save the canvas as it is with it's information. Kind of like Photoshop and a .PSD file.

Firstly, you should use Canvas.toDataURL export the data. After that, you can send the data with a FormData via Fetch API.

var fd = new FormData();
fd.append('field', canvas.toDataURL('image/jpg'), 'sketch.jpg');
fetch('/saveSketch', {
  method: 'POST',
  body: fd,
});

On server side, you need to parse this FormData to retrieve the file. At this time, your files are already available for being saved into database or filesystem.