Member Avatar for phorce

Hello,

I'm using jQuery and trying to create a plugin that draws a rectangle on a canvass. However, it will not even work.. I have tried to create it when I click on a button, this does not work either.. Here is the code:

<html>
<head>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

	<style type="text/css">
	.cancasing {
		margin-left: 200px;
		margin-top: 100px;
		border-style:solid;
		border-width:1px;
		
		width:900px;
		height:500px;
	}
	
	</style>
	
</head>
	<script type="application/javascript">
	jQuery.fn.drawRect = function(options) {
		
		var defaults = {
			text: 'Default text for div element', 
			x: 10,
			y: 10,
			w: 100,
			h: 200
		};
		
		var options = jQuery.extend(defaults, options);
		
		return this.each(function() {
			$(this) = $(document.createElement('div')).css({border: '1px dotted black'}).addClass("ui-boxer-helper");
		});

	};
	
	$(function()
	{	
	 	var canvas = $("#canvas")[0];
	 	var ctx = canvas.getContext("2d");
	 	
	 	$('#start').click(function()
	 	{
	 		alert ('Hello world');
	 		$.drawRect(
	 		{
	 			text: 'Hello world'
	 		
	 		});
	 	
	 	});
	 	
	});
	
   </script>
  </head>
<body>
	
		<canvas id="canvas" class="cancasing"></canvas>
		<button id="start">Start</button>
		
		
</body>

</html>

Any suggestions please?

  • 2 Contributors
  • 1 Reply
  • 89 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for AleMonteiro

There was a couple of problems with your code... i've adapted to work somewhat:

<html>
<head>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

	<style type="text/css">
	.cancasing {
		margin-left: 200px;
		margin-top: 100px;
		border-style:solid;
		border-width:1px;
		
		width:900px;
		height:500px;
	}
	
	</style>
	
</head>
	<script type="text/javascript">
	jQuery.fn.extend({ // Extends JQuery methods
	
		drawRect: function(options) { // add drawRect method
			
			var defaults = {
				text: 'Default text for div element', 
				x: 10,
				y: 10,
				w: 100,
				h: 200
			};
			
			var options = jQuery.extend(defaults, options);
			
			return this.each(function() {
				$("<div>") // Create div 
					.html(options.text) // Set inner html
					.css({border: '1px dotted black'}) // set css
					.addClass("ui-boxer-helper") // set class
				.appendTo($(this)); // append to object
			});
		}
	});
	
	$(function()
	{	
	 	$('#start').click(function()
	 	{
	 		$("#canvas").drawRect(
	 		{
	 			text: 'Hello world'
	 		});
	 	
	 	});
	});
	
   </script>
  </head>
<body>
	
		<div id="canvas" class="cancasing"></div>
		<button id="start">Start</button>
		
</body>

</html>

Hope it helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.