Canvas- Protect Javascript Source Code by using PHP and Ajax
Written by 9 July 2013
This is an important question: "If I create a wonderful graphics by HTML5 Canvas and Javascript, how can I protect my source code?". I have searched about it but no satisfying answer was found. So I've decided to create a way for protecting sources of HTML5 Canvas and in general Javascript codes. In fact, the algorithm can be protected not the whole source. The procedure is that I have designed a PHP script which performs calculations and loops, and the results are called by Ajax. The following example is just our previous plotter, but, the graph points and lines are calculated and generated by PHP, called by Ajax, and then it is drawn by Javascript in the Canvas element. So each user can just achieve its own graph code, not the whole grapher script. The PHP source is also given below. It's great, isn't it? Use for free but do not forget a link to us!
Code Snippet:
<!-- this script is provided by http://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<div id="s" style="display: none"></div>
<table style="border: 1px solid #000000; width: 347; height: 186;">
<tr><td style="border-style: solid; border-width: 1px; text-align: center; width: 125;">Data (x,y):</td>
<td rowspan="3" style="border-style: solid; border-width: 1px; width: 289px;">
<canvas id="myCanvas" width="300px" height="230px"></canvas>
</td></tr>
<tr><td style="width: 125; border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; text-align: center; height: 159px;">
<textarea id="txy" name="txtXY" style="width: 65px; height: 148px" tabindex="1">1,3
2,7
3,6
4,0
5,6
7,9</textarea></td></tr>
<tr><td style="text-align: center; border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; width: 125; height: 35px;">
<input name="btnPrev" type="button" value="Preview" id="prv" tabindex="2" onclick="plot()" /></td></tr>
</table>
<script>
var cnv = document.getElementById('myCanvas')
var txy= document.getElementById('txy')
var ctx = cnv.getContext('2d'), cW= cnv.offsetWidth, cH= cnv.offsetHeight
var obj=document.getElementById('s')
vars= new Array()
function plot(){
var rData= txy.value
vars['cW']=cW
vars['cH']=cH
vars['data']=rData
ajaxpost('aj.php',vars,obj,false)
}
function ajaxget(des,params,resultObj,async){
var ajaxRequest, script="";
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4 && ajaxRequest.status==200)
resultObj.innerHTML = eval(ajaxRequest.responseText.trim());
else
return false;
}
var op= '?'
for(key in params){
script+= op + key + '=' + params[key]
op= '&'
}
ajaxRequest.open('get',des+script, async);
ajaxRequest.send(null);
}
function ajaxpost(des,params,resultObj,async){
var ajaxRequest, script="";
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){
//resultObj.innerHTML = ajaxRequest.responseText.trim();
resultObj.innerHTML = eval(ajaxRequest.responseText.trim());
}else
return false;
}
var op= ''
for(key in params){
script+= op + key + '=' + params[key]
op= '&'
}
ajaxRequest.open("POST",des,async);
ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajaxRequest.send(script);
}
</script>
<div style="text-align: left"><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div>
<a target='_blank' href='http://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!