Canvas- Protect Javascript Source Code by using PHP and Ajax

Written by @m_k_amin 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 https://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='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300