0

Is this possible? Actually i'm creating a canvas editor and i want to save the canvas in an html5 file. i've seen some sites that after editing and drawing objects in the canvas i can save my work as an html file. How is this possible?

Kiel
  • 483
  • 3
  • 5
  • 18
  • Canvas is already a HTML5 element..? (and there is no such thing as html5 file per se). Do you mean how to save canvas as image or save the content to a local storage? –  Oct 10 '13 at 06:17
  • See if this can give you some hints: http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server?rq=1 –  Oct 10 '13 at 06:20
  • hi @Ken-AbdiasSoftware i want to export my work to an html file so all the animations scripts will be there complete with html headers, tags etc. – Kiel Oct 10 '13 at 06:32
  • also using toDataUrl will only save the canvas as an image. I want to save the canvas with animations and the script that animates it, and html codes. – Kiel Oct 10 '13 at 06:34
  • Canvas cannot help with that as it's just a editable bitmap. I think what you're asking is perhaps a bit broad to be answered here on SO.. if you edit your post to clarify what you mean it can help you get more input. –  Oct 10 '13 at 06:36

1 Answers1

1

Not entirely sure if this is what you mean but if so I hope it helps.

My project was also to create a canvas editor. In my editor I store details of individual canvas shapes in a shape object. Using the data in the shape objects I then can produce HTML that creates a Canvas and the Javascript code to reproduce these shapes.

The project is canvimation

The project is on Github and the particular Javascript files that produce the HTML are export.js and canvashtml.js

jing3142
  • 1,821
  • 1
  • 11
  • 16
  • hi jing! actually your project served as my inspiration to my project. So i'm trying to build one. BTW are animations that has been made in the canvas for example, tweens, is it possible to be included in the extracted html? BTW your project is awesome! – Kiel Oct 11 '13 at 03:08
  • it is not possible to save a tween directly as an animation just as data that can be saved for re-use. You can export it indirectly by adding it to a film and exporting the film to produce HTML that will reproduce the animation. The code for this producing this HTML is in [exportfilms.js](https://github.com/canvimation/canvimation.github.com/blob/master/scripts/exportfilms.js). You are welcome to use any of my code but I do apologise for the lack of documentation on the code, which probably makes it difficult to follow. – jing3142 Oct 12 '13 at 09:57
  • Great thanks for the idea! I will try everything that you suggested. – Kiel Oct 14 '13 at 05:51