The community forums are in BETA and closed to the public.

Html5 share canvas upload an image and make it uploaded to all

Hello. We are making an application where an html5 canvas will be shared as in the demo. The only thing is that we want to enable the users to upload an image like

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('drawCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){

   var reader = new FileReader();
    reader.onload = function(event){
    var img = new Image();
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
    img.src =;

} and then the image would be uploaded to the other users as well. Is there a way that this is possible?

Upload the image to a file system like Amazon S3 and when any user loads the app with the canvas, you use that URL to display the image. The URL would be published on a channel that users viewing the canvas would be subscribed to.

That's very high level but does that get you started or are you already there.

Hello and thanks for your quick reply. No i was not there and that seems a bit tricky. Can an image be uploaded for example to google drive and from code only take the link and use it to put the image to other people's canvas, have i uderstood correctly? If yes, please state an example of code as it would be of great help

Yes, using Google Drive is a similar concept as using S3. I am not familiar with GDrive being used for production services outside of Google Drive itself though. As long as the link is shared with appropriate permissions for those that need to access the image then is should work. So any shared repository will work.

Login or Signup to post a comment