# Dragging canvas out of the browser (as an image)

**URL:** <https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183>\
**Category:** Libraries\
**Created:** [August 4, 2019, 6:17pm UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183 "2019-08-04T18:17:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![thirstydude](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@thirstydude](https://discourse.processing.org/u/thirstydude)\
**Post date:** [August 4, 2019, 6:17pm UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/1 "2019-08-04T18:17:41Z")

</div>

Hi everyone!  
this is my first post and i hope i am in the right section here. Also, i am very new to p5 and coding in general so please bear with me 🙂

i am kind of stuck in a very simple project i’m doing. i want to drag the canvas out of the browser into my desktop and be saved as a specific file (svg in my case, i use the P5js-svg plugin). i haven’t found a solution for this i thought i’d ask here.

i thought i’d note that, when i make my canvas a variable and make it a div element

`(canvas.parent('my_canvas')`

then it returns the following in my console:

```auto
TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

```

if i set my canvas as normal (non-svg) the div element works fine (i hope i’m right about it being called a “div element”). But i still have no idea how to make it a “drag-able” image/file, this should at least be doable since i can drag out any image from another source, say a png image on a website.

shall i post my file or do you need any additional information?

thanks in advance and please apologize if i made any obvious mistakes, i’m learning 🙂

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 5, 2019, 2:58am UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/2 "2019-08-05T02:58:28Z")

</div>

> [@thirstydude](#):
>
> P5js-svg plugin

please link to that and show your minimal sketch.js code you use to  
draw something what you want save as a SVG file?  
( by DRAG? what usually max gives a png? )

---

<div class="post-metadata">

**Author:** ![thirstydude](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@thirstydude](https://discourse.processing.org/u/thirstydude)\
**Post date:** [August 6, 2019, 2:44pm UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/3 "2019-08-06T14:44:44Z")

</div>

Hi kll! Thanks for the reply!

Here’s my code;

```auto
'use strict';

let canvas;

function setup() {
  canvas = createCanvas(200, 200, SVG);
  colorMode(HSB, 360, 100, 100);
  noStroke();

  setupShape();
}

function draw() {
  drawShape();
}

function keyReleased() {
  if (key == 's' || key == 'S') save("generated_graphic.svg");
  if (key == 'p' || key == 'P') save("generated_graphic.png");
}

```

the functions `setupShape()` and `drawShape()` are in a seperate File, just in case you’re wondering. The argument “SVG” inside `createCanvas()` is activating the p5js-svg plugin. Saving as svg or png works perfectly.  
I stumbled upon this while trying to find a solution but i can’t really make it work (at least in safari.)  
[thecssninja.com - drag out files like gmail](https://www.thecssninja.com/javascript/gmail-dragout)

here’s a link to the svg plugin:  
[github - p5.js-svg](https://github.com/zenozeng/p5.js-svg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 7, 2019, 1:32am UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/4 "2019-08-07T01:32:00Z")

</div>

-a- looks like from 2015 ( and i not see with what rev of p5.js it is tested )  
does it RUN and DO what it is supposed to do BUT when you try our DRAG you only get a PNG?

-b- your code uses key to save a SVG file, is that working?

-c- again, p5.js makes ?frames of PNG? with my little understanding  
now using any SVG renderer means what?

- that you can draw SVG
- that the browser gets by p5.js send a SVG to show as image,  
then a DRAG / image save to / would can catch a SVG file, but i doubt that is the case.

please use your browser inspect to DIG into the stuff what is real LOCAL.

* * *

sorry, hope the specialists can comment better,  
and thanks for adding that information.

---

<div class="post-metadata">

**Author:** ![thirstydude](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@thirstydude](https://discourse.processing.org/u/thirstydude)\
**Post date:** [August 7, 2019, 8:46am UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/5 "2019-08-07T08:46:36Z")

</div>

a) it works perfectly fine with the current version of p5.js. it does what it’s supposed to do. BUT i cannot drag out a PNG neither can i drag out a SVG. (that means if i set up my canvas completely without any plugins, i still can’t drag out anything.) I think this has to do with the way the p5.renderer represents things in the html structure. Also, it seems like no sketch (no matter the plugin) is able to make itself “draggable” without any special instructions.

b) it does, it works fine.

c) svg does make a vector file rather than a bitmap file. i can draw svg’s and i can save them as such. the browser does indeed seem to get a svg to display, when i save the file via my coded command, i do get a .svg file which is working fine.

the browser seems to only be able to copy images on dragout, but the article i linked from cssninja describes a way to make files of any type draggable. I just can’t seem to get it to work. When you try out cssninja’s example page, it doesn’t work for me either. I’m using the latest version of safari on macOS mojave.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 10, 2019, 12:37am UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/6 "2019-08-10T00:37:20Z")

</div>

> [@thirstydude](#):
>
> it seems like no sketch (no matter the plugin) is able to make itself “draggable” without any special instructions

I am not a p5.js expert, but it sounds like you want to create an html element, rather than rendering to the canvas. You do that with p5.dom.

> **[reference | p5.js](https://p5js.org/reference/#/libraries/p5.dom)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

```auto
function setup() {
  createCanvas(400, 400);
}
function draw() {
  if(frameCount==1){
    createImg("myimg.png");
  }
}

```

Now there is an html image below your canvas. Like any html img element, you can drag it.

If you want it to be on top of your canvas area, I believe that gets into attaching it to canvas object and/or positioning. Instance mode might be an option?

Hopefully forum p5.js experts can steer you right here.

> **[examples | p5.js](https://p5js.org/examples/instance-mode-instance-container.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![thirstydude](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@thirstydude](https://discourse.processing.org/u/thirstydude)\
**Post date:** [August 21, 2019, 8:30am UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/7 "2019-08-21T08:30:14Z")

</div>

@jeremydouglass:

thank you for your solution, unfortunately i couldn’t get it to work that way. The svg plugin crashes when i try to make the canvas a div element in the HTML via canvas.parent. When i try with bitmap mode it does work but i still can’t drag anything out of the browser.

```auto
let canvas;

function setup() {
  canvas = createCanvas(200, 200);
  canvas.parent('p5_canvas');
  colorMode(HSB, 360, 100, 100);
  noStroke();

  setupShape();
}

function draw() {
  drawShape();

  if(frameCount==1){
    createImg("myimg.png");
  }
}

function keyReleased() {
  if (key == 's' || key == 'S') save("generated_graphic.svg");
  if (key == 'p' || key == 'P') save("generated_graphic.png");
}

```

the html file looks like this

```auto
<html>
  <head>
    <meta charset="UTF-8">
    <title>draggable image test</title>
    <script src="libraries/p5/p5.js" type="text/javascript"></script>
    <script src="libraries/p5/p5.dom.js" type="text/javascript"></script>
	  <script src="libraries/svg/dist/p5.svg.js" type="text/javascript"></script>
    <script src="canvas.js" type="text/javascript"></script>

  </head>
  <body>
    <div id='p5_canvas'></div>
  </script>
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 21, 2019, 6:27pm UTC](https://discourse.processing.org/t/dragging-canvas-out-of-the-browser-as-an-image/13183/8 "2019-08-21T18:27:22Z")

</div>

Ah – somehow I completely misunderstood / misread. I thought you wanted to drag an image file out of the canvas area – not an image the whole canvas.

I’m not sure, but I would guess that you should use createGraphics…? Maybe a p5.js expert can chime in.

[https://p5js.org/reference/#/p5/createGraphics](https://p5js.org/reference/#/p5/createGraphics)