Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Interactive Canvas Imaging Applications JavaScript PHP Tutorial

Learn to engineer interactive canvas based image rendering applications. We do it by randomly generating data or gathering data from the user through form inputs, then we render that data on canvas and save the canvas rendering as an image that people can share on social sites. card_create.php <?php // This code puts the canvas image on the server if(isset($GLOBALS['HTTP_RAW_POST_DATA'])){ $rawImage = $GLOBALS['HTTP_RAW_POST_DATA']; $removeHeaders = substr($rawImage, strpos($rawImage, ",")+1); $decode = base64_decode($removeHeaders); $filename = time()."card".mt_rand(); $fopen = fopen('card_images/'.$filename.'.jpg', 'wb'); fwrite($fopen, $decode); fclose($fopen); echo $filename; exit(); } ?><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Customize a birthday card</title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <style> body{ font-family: Arial, Helvetica, sans-serif; } #theform{ background: url(images/demo_card_1.jpg) no-repeat; width:800px; height:500px; margin:0px auto; } #theform > div{ margin-left:240px; padding-top:80px;} #theform > div > input{ display:block; padding:7px; width:320px; } #theform > div > #name2{ margin-top:290px; } .menu{ width:600px; margin:0px auto; text-align:center; padding:20px; } .menu > button{ font-size:19px; padding:10px 30px; cursor:pointer; } #card_canvas{ display:block; width:800px; height:500px; margin:0px auto; } </style> <script> function _(x){return document.getElementById(x);} var demo_card_1 = new Image(); demo_card_1.src = "images/demo_card_1.jpg"; function preview(){ var name1 = _("name1").value; var name2 = _("name2").value; if(name1 == "" || name2 == ""){ alert("Please fill in both fields"); return false; } var ctx = _('card_canvas').getContext('2d'); ctx.drawImage(demo_card_1, 0, 0); ctx.fillStyle = 'rgba(255,255,255,1)'; ctx.font = 'bold 34px "Comic Sans MS", cursive'; ctx.shadowColor = 'rgba(0,0,0,1)'; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.shadowBlur = 2; ctx.fillText(name1, 240, 104, 320); ctx.fillText(name2, 240, 426, 320); } function render(){ _("renderbtn").style.display = "none"; _("canvas_save_status").innerHTML = "rendering... please wait..."; var ctx = _('card_canvas').getContext('2d'); var imgdata = ctx.canvas.toDataURL("image/jpg"); var hr = new XMLHttpRequest(); hr.open("POST", "card_create.php", true); hr.setRequestHeader("Content-type", "canvas/upload"); hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { window.location = "card.php?id="+hr.responseText; } } hr.send("cd="+imgdata); } </script> </head> <body> <form id="theform" onsubmit="return false"> <div> <input id="name1" placeholder="Recipient Name"> <input id="name2" placeholder="Your Name"> </div> </form> <div class="menu"> <button id="btn1" onclick="preview()">&darr; Preview &darr;</button> </div> <canvas id="card_canvas" width="800" height="500"></canvas> <div class="menu"> <button id="renderbtn" onclick="render()">Render and Share</button> <span id="canvas_save_status"></span> </div> <div style="height:200px;"></div> </body> </html> card.php <?php $id = ""; if(isset($_GET["id"]) && $_GET["id"] != ""){ $id = preg_replace('#[^a-zA-Z0-9]#', '', $_GET['id']); } else { header("location: card_create.php"); exit(); } ?><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Card <?php echo $id; ?></title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <style> body{ font-family: Arial, Helvetica, sans-serif; } button{ padding:5px 10px; font-size:17px; cursor:pointer; } </style> </head> <body> <img src="<?php echo "card_images/".$id.".jpg"; ?>" alt="card"> </body> </html>
thumb

JavaScript Videos

Canvas Programming

2D Context Object and Rectangle MethodsFill and Stroke Styles Color Gradient PatternLine Styles for Lines and StrokesBuilding and Drawing PathsDrawing Images and VideosDrawing Text on CanvasRendering Shadows on CanvasCanvas Transformation EffectsPixel Manipulation on CanvasCompositing on the CanvasDynamic Centering and Alignment on the CanvasCanvas Animation and App InitializationObject Oriented Assets OOP on CanvasDetect Mouse Coordinates on CanvasAnimated Background Layers on Canvas TutorialKeyboard Control and MovementJSON Object Arrays and Loops on CanvasHit Detection Mouse Touch Over Object ArraysCollision Detection Hit Game EnemiesParticle Effect System Tutorial Snow Falling AnimationInteractive Canvas Imaging Applications JavaScript PHP TutorialCircular Progress Loader Canvas JavaScript Programming Tutorial