Question

i’m new to HTML5 and i just want to know how can i save the canvas data ( i have drawn a square on the canvas ). I wanna save x,y,h,w or scale on the database and use that data to recreate the drawing again. How can i do this ?

Thank You.

Answer 1

Well you could store them into a mysql database or a server file.

In case of mysql create a table named entities with the columns you want or even 1 column and serialize the data you want to store.

For example

id | x | y | h | w | scale
1    4   4   4   4    0.5

or

$object_cube = array();
$object_bube['x'] = 4;
$object_bube['y'] = 4;
$object_bube['h'] = 4;
$object_bube['w'] = 4;
$object_bube['s'] = 0.5;

then serialize and create your PDO query

$host =     "localhost";
$user =     "someuser";
$pass =     "somepass";
$database = "db_name";

$db = new PDO("mysql:host=$host;dbname=$database", $user, $pass,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8")) or die("Connection error!");
$ser_obj = serialize($object_cube);
$query = "INSERT INTO entities ('cube') VALUES (:object)";
$params = array(':object' => $ser_obj );
db_query($query, $params);

function db_query($q,$p = array())
{
    global $db;

    if($stmt = $db->prepare($query))
    {

        if(count($p) > 0)
        {
            foreach ($p as $key => $value) {
                $stmt->bindParam($key,$value);
            }
        }

        $stmt->execute();

    }

}

this should take care of saving after that is up to you to load what you want whenever you need it by mining the database 🙂

You ‘ll have to be familiar with AJAX -> http://www.w3schools.com/ajax/default.asp
and some server side language like php or asp. Otherwise you could store it locally.