Search

canvas - search results

If you're not happy with the results, please do another search

0 14590

Working with HTML we sometimes face with necessity of saving the results as image. The image can be saved on server or we can force downloading the result directly into your browser.

You may think it might be complex, but it is not in fact.

<canvas id="my-canvas" width="600" height="300"></canvas>
<script>
    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');
    var x = 125, y = 100;
    // begin custom shape
    context.beginPath();
    context.moveTo(x, y);
    context.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 60, y + 70);
    context.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70);
    context.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 20);
    context.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30);
    context.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30);
    context.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y);
    // complete custom shape
    context.closePath();
    context.lineWidth = 5;
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.strokeStyle = 'blue';
    context.stroke();
</script>

In this example, we use bezier curves to draw a simple cloud.

2. Next step is to convertthe  canvas image to base64:

var canvasData = canvas.toDataURL("image/png");

3. Finally, we can send the result base64 to server

$.ajax({
    type: "POST",
    url: "upload-image.php",
    data: {
        imgBase64: canvasData
    }
}).done(function(o) {
    console.log('uploaded');
});

4. Or alternatively, you can force the download into your browser:

const downloadLink = document.createElement('a');
document.body.appendChild(downloadLink);
downloadLink.href = canvasData;
downloadLink.target = '_self';
downloadLink.download = 'image.png';
downloadLink.click();

5. If you wish to save the image on your server, it can be done in any language, below you can find a basic example in PHP:

if (isset($GLOBALS['HTTP_RAW_POST_DATA'])) {
    $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
    $filteredData = substr($imageData, strpos($imageData, ',') + 1);
    $unencodedData = base64_decode($filteredData);
    $fp = fopen('/path/to/file.png', 'wb');
    fwrite($fp, $unencodedData);
    fclose($fp);
}

Thanks for your attention to this lesson

6 106370
HTML5 Canvas 3D Sphere

HTML5 Canvas 3D Sphere

Our new tutorial tells us about creation of animated 3D Sphere (through direct access to pixels of canvas). The sphere itself is getting around the canvas continuously. This example should work in the most of modern browsers (like Firefox, Chrome, Safari and even in IE).

5 98300
Snake game using HTML5 Canvas and KineticJS

Snake game using HTML5 Canvas and KineticJS

Snake game. In the beginning, before start making a new game, you need to prepare the concept (logic) of the game. You need to have a clear idea about it. You need to develop a high level of understanding, without going into the fine details. In the first phase, we find the answer "what" we want to create, and we reserve the answers to "how to do" for the upcoming stages. Let me illustrate this method with an example. Let’s develop the popular game "Snake". This game was popular long ago, even on consoles and old cell phones with text user interfaces.

0 53100
10 recent HTML5 canvas tutorials

10 recent HTML5 canvas tutorials

In today’s collection I gathered all the latest tutorials on html5 (canvas). I hope that they will help you to learn how to work with html5 (javascript) more clearly. Some of them are initial articles on game development, but, you can also find here other interesting articles like typographic effects, charts, curves, triangle meshes and even ascii animation.

9 136185
HTML5 Color Picker (canvas)

HTML5 Color Picker (canvas)

In our new tutorial we are going to create an easy, but effective color picker using HTML5. I think that you have already seen different jQuery versions of colorpicker, our today’s goal – to create something similar, and even better. In order to make it more unique, there are 5 different colorwheels which you can use. If you are ready – let’s start.

2 73300
HTML5 Canvas Navigation menu with Fire

HTML5 Canvas Navigation menu with Fire

Have you ever thought about creating some interactive navigation menu in HTML5, directly at canvas element? Yes, this is strange idea, but it is quite possible that similar ideas are attended you. So, I made up my mind to prepare our first pure html5 canvas menu (basically – this is some set of buttons). We will create these buttons with a fire affect at the bottom. And you will be able to set custom click actions for menu elements.

0 32080
HTML5 Canvas Twirl Sphere

HTML5 Canvas Twirl Sphere

Today, I would like to tell about creation of animated Twirl Sphere (I modified our previous 3D sphere, and, I used same way of accessing pixels of canvas). Our sphere goes around the canvas continuously. This example is cross browser solution (because of html5).

2 55415
10 HTML5 Valentine's examples

10 HTML5 canvas examples for Valentine’s Day

I had to prepare this a few days ago, but I hope that it’s not too late. I want to introduce you the pleasant html5 examples for women, especially on Valentine’s Day. This is a collection of interactive hearts and flowers. Trust me – your girlfriend will love it!

42 295645
HTML5 Canvas Slideshow
HTML5 Canvas Slideshow

HTML5 Canvas Slideshow

In this tutorial we are making a HTML5 Slideshow (canvas) with own animated transitioning effect. The main idea – drawing images with higher contrast in the ends of transitions.

POPULAR TUTORIALS

How to Easily Make a PHP Chat Application

172 1291260
How to Easily Make Chat application with PHP + SQL Today I will tell you about creating simple Chat application using our existing login system....
CSS3 Modal Popups