0

If you have this:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>

compiled with an HTML compiler, you will get an image that you can right click and select "Save image as...."

but if you take this:

<!DOCTYPE html>

<html lang="en" class=""><head><script src="//static.codepen.io/assets/editor/live/console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js"></script><script src="//static.codepen.io/assets/editor/live/css_reload-2a5c7ad0fe826f66e054c6020c99c1e1c63210256b6ba07eb41d7a4cb0d0adab.js"></script><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico"><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111"><link rel="canonical" href="https://codepen.io/sdthornton/pen/wBZdXq">


<style class="cp-pen-styles">body {
  background: #e2e1e0;
  text-align: center;
}

.card {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 300px;
  margin: 1rem;
  position: relative;
  width: 300px;
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

</style></head><body>

<div class="card card-2"></div>
</body></html>

and right click on the output, you can't select "Save image as..." How am I supposed to write the code in order to be able to right click on the .card-2 and save it as an image?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
BananaMaster
  • 377
  • 6
  • 15
  • It is *not* an image. It is a container for text. *Some* user agents display it visually in the shape of a rounded rectangle. Others don't: some user agents render text aurally; other user agents, e.g. Lynx, don't do graphics. If a user uses a graphical user agent, they can always hit to place a copy of the displayed image on the clipboard and paste it into their preferred raster image editor. – AlexP Dec 02 '18 at 15:51
  • you can't PrtScr transparency tho, which is what I'm going for... – BananaMaster Dec 02 '18 at 15:53
  • 1
    The point is that is an image, while
    isn't.
     – AlexP Dec 02 '18 at 15:53
  • Is there a way to write the code in instead of
    ?
     – BananaMaster Dec 02 '18 at 15:57

1 Answers1

1

As others have stated canvas elements can be saved as IMGs (because the browser treats them like one) from the browser as you explain; however that's not the case with HTML+CSS. Your question implies that you can then right click on any website and save the whole thing as an image.

What you could do is take a div's content and putting it inside a canvas, some ideas and tips for that can be found here: How can I convert an HTML element to a canvas element?

Davo
  • 966
  • 7
  • 15