Html Codes: Canvas- Protect Javascript Source Code by using PHP and Ajax

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!

<!-- 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>

If you don't know how to use this code or need more information Click here!

Sources: Download


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Canvas- Protect Javascript Source Code by using PHP and Ajax

You can leave comments once you sign in/up.

Review

Links