There is a 3D context for canvas, but it is not called &quot;3d&quot;, but [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) (&quot;webgl&quot;).

WebGL should be [available in the most up-to-date versions of all browsers](http://caniuse.com/#feat=webgl). Use:


    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
     &lt;body&gt;
     &lt;canvas id=&#39;c&#39;&gt;&lt;/canvas&gt;
      &lt;script&gt;
	    var c = document.getElementById(&#39;c&#39;);
	    var gl = c.getContext(&#39;webgl&#39;) || c.getContext(&quot;experimental-webgl&quot;);
	    gl.clearColor(0,0,0.8,1);
	    gl.clear(gl.COLOR_BUFFER_BIT);
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

&gt; how could you use that? I tried 3D before, but didn&#39;t really
&gt; understand

- if you think &quot;real&quot; languages are difficult, you will have a lot of trouble with WebGL. In some respects it is quite high level, in other respects it is quite low level. You should brush up on your maths(geometry) and prepare for some hard work.
- three.js is a very appreciated library that allows you to do yet a lot of 3d without dealing with webgl directly, check it out.

It&#39;s possible to get a [WebGL context][1], which would give you access to that API, allowing for OpenGL ES 2.0-like 3D rendering.


  [1]: https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL

The 3d context is not yet implemented in most browsers.  I believe that there is an experimental version of Opera that supplies one, and an addon for FF that does the same, but none of them are ready for primetime. You&#39;ll have to wait for wide adoption and implementation.

&gt;and I think JavaScript is more easy than a real programming language

Javascript is a &#39;real&#39; programming language.  Being a high level language does not make it a toy or fake (and this is coming from a systems guy who, in your opinion, writes code in &quot;real&quot; programming languages every day).


    int CPMSifDlg::EncodeAndSend(char *firstName, char *lastName, char *roomNumber, char *userId, char *userFirstName, char *userLastName)
	{
		...

		return 1;
	}

    extern &quot;C&quot;
    {
    	__declspec(dllexport) int start(char *firstName, char *lastName, char *roomNumber, char *userId, char *userFirstName, char *userLastName)
    	{
    		return CPMSifDlg::EncodeAndSend(firstName, lastName, roomNumber, userId, userFirstName, userLastName);
    	}
    }

On line `return CPMSifDlg::EncodeAndSend` I have an error :
Error : a nonstatic member reference must be relative to a specific object.

 What does it mean?


what does &quot;error : a nonstatic member reference must be relative to a specific object&quot; mean?

When trying to commit a change to a repository ( where I am the only user ) I get an error
    
    Path
    &#39;/trunk/TemplatesLibrary/constraints/templates/TP145210GB01_PersonWithOrganizationUniversal.cs&#39;
    is already locked by user &#39;admin&#39; in filesystem
    &#39;/guest/gam/subversion/cdaapi/db&#39;
    
I am the user &#39;admin&#39;.

I have tried the following, all without success

 - running a &quot;clean up&quot; from Tortoise SVN
 - checking out a new copy
 - using the &quot;repo browser&quot; to break locks, but no locks are shown ( as per https://stackoverflow.com/questions/8470730/svn-file-locked-by-me-now-cannot-commit-it )
 
 I am completely stuck now as I have a repository now that I can not commit any updates to.
 
 Any ideas how I fix this
 
 More Info, as requested :
 
 SVN Status command yields  ( I have made edits to one file )
 

                92       77 admin        TP146228GB01_EncompassingEncounter.cs
                92       83 admin        TP145212GB02_WorkgroupUniversal.cs
                92       83 admin        TP146248GB01_ReferenceURL.cs
                92       85 admin        TP145201GB01_PatientUniversal.cs
                92       83 admin        TP145204GB02_RecipientWorkgroupUniversal.cs
                92       83 admin        TP145202GB01_RecipientPersonUniversal.cs
                92       83 admin        TP145203GB02_RecipientOrganizationUniversal.cs
                92       77 admin        TP145205GB01_PersonUniversal.cs
                92       83 admin        TP145202GB02_RecipientPersonUniversal.cs
                92       83 admin        TP145203GB03_RecipientOrganizationUniversal.cs
                92       85 admin        TP145211GB01_HealthCareFacilityUniversal.cs
                92       85 admin        TP145200GB01_AuthorPersonUniversal.cs
                92       83 admin        TP145207GB01_AuthorDeviceUniversal.cs
            M   92       87 admin        TP146226GB02_Consent.cs
                92       85 admin        TP146229GB01_TextSection.cs
                92       83 admin        TP145204GB03_RecipientWorkgroupUniversal.cs
                92       86 admin        TP145018UK03_CustodianOrganizationUniversal.cs
                92       83 admin        TP145208GB01_AuthorNonNamedPersonUniversal.cs
                92       70 admin        TP145214GB01_DocumentParticipantUniversal.cs
                92       85 admin        TP145007UK03_RelatedEntity.cs
                92       80 admin        TP146224GB02_Atachment.cs
                92       83 admin        TP146227GB02_ServiceEvent.cs
                92       77 admin        TP145210GB01_PersonWithOrganizationUniversal.cs

                
A svn commit then yields

    svn commit --message updates
    Sending        TP146226GB02_Consent.cs
    Transmitting file data .svn: E195022: Commit failed (details follow):
    svn: E195022: File    &#39;D:\BENBUN_CODE\WORK\cdaapi\trunk\TemplatesLibrary\constraints\templates\TP146226GB02_Consent.cs&#39; is locked in another working copy
    svn: E170007: No lock on path &#39;/subversion/cdaapi/!svn/wrk/3c75d861-8462-b94e-8729-df54843044f9/trunk/TemplatesLibrary/constraints/templates/TP146226GB02_Consent.cs&#39; (Status 423 on PUT Request)
    svn: E175002: Server sent unexpected return value (423 Locked) in response to PUT request for &#39;/subversion/cdaapi/!svn/wrk/3c75d861-8462-b94e-8729-df54843044f9/trunk/TemplatesLibrary/constraints/templates/TP146226GB02_Consent.cs&#39;  
    
As requested output of SVN st -u is shown below 
   
    &gt;svn st -u
    M               92   TP146226GB02_Consent.cs
    Status against revision:     92              

SVN &quot;Already Locked Error&quot;

I read about the canvas tag in HTML5, and always saw `getContext(&#39;2d&#39;)`.  
The parameter is &#39;2d&#39;, so isn&#39;t there another possibility like &#39;3d&#39;?  
And, how could you use that? I tried 3D before, but didn&#39;t really understand (due to a non-explaining tutorial). Any Tutorials?

Can you use canvas.getContext(&#39;3d&#39;)? If yes, how?

<p>I read about the canvas tag in HTML5, and always saw <code>getContext('2d')</code>.<br>
The parameter is '2d', so isn't there another possibility like '3d'?<br>
And, how could you use that? I tried 3D before, but didn't really understand (due to a non-explaining tutorial). Any Tutorials?</p>


I have a HTML form where I use several buttons. The problem is that no matter which button I  click, the form will get submitted even if the button is not of type &quot;submit&quot;. e.g. Buttons like :`&lt;button&gt;Click to do something&lt;/button&gt;`, result in form submission.

It&#39;s quite painful to do an `e.preventDefault()` for each one of these buttons.

I use jQuery and jQuery UI and the website is in HTML5.

Is there a way to disable this automatic behavior?



Disable form auto submit on button click

I have the following JQuery code:

	$(document).ready(function () {
		var $containerHeight = $(window).height();
		if ($containerHeight &lt;= 818) {
			$(&#39;.footer&#39;).css({
				position: &#39;static&#39;,
				bottom: &#39;auto&#39;,
				left: &#39;auto&#39;
			});
		}
		if ($containerHeight &gt; 819) {
			$(&#39;.footer&#39;).css({
				position: &#39;absolute&#39;,
				bottom: &#39;3px&#39;,
				left: &#39;0px&#39;
			});
		}
	});

The only problem is that this only works when the browser first loads, I want `containerHeight` to also be checked when they are resizing the window?

Any ideas?

jQuery on window resize

I don&#39;t know how to merge rows and columns inside HTML tables.

![Example][1]

Can you please help me with making such a table in HTML?


  [1]: http://i.stack.imgur.com/G0fbQ.png

How do you use colspan and rowspan in HTML tables?

What&#39;s the difference between these two? To me a Popover just looks like a larger Tooltip with thicker borders. Is there any qualitative difference, or is it just a matter of how bold you want it to be?

Twitter Bootstrap: Popover vs Tooltip?

According to the twitter bootstrap [documentation][1], I should be able to &quot;Wrap strings of text in a `&lt;p&gt;` tag for proper leading and color.&quot; When I do this, at any level under `navbar` it simply doesn&#39;t inherit any of the `navbar` classes. Wrapping the string in `&lt;a&gt;` tags renders it but it shouldn&#39;t be an anchor. 

The string I&#39;m trying to render is `&quot;Logged in as ... &quot;`.

  [1]: http://twitter.github.com/bootstrap/components.html#navbar

Twitter Bootstrap: Text in navbar

I&#39;m an experienced Java programmer but am looking at some JavaScript/HTML5 stuff for the first time in about a decade.  I&#39;m completely stumped on what should be the simplest thing ever.

As an example I just wanted to draw something and add an event handler to it.  I&#39;m sure I&#39;m doing something stupid, but I&#39;ve searched all over and nothing that is suggested (e.g. the answer to this question:  https://stackoverflow.com/questions/789824/add-onclick-property-to-input-with-javascript) works.  I&#39;m using Firefox 10.0.1.  My code follows.  You&#39;ll see several commented lines and at the end of each is a description of what (or what doesn&#39;t) happen.

What&#39;s the correct syntax here?  I&#39;m going crazy!

    &lt;html&gt;
	&lt;body&gt;
		&lt;canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;150&quot;/&gt;
		&lt;script language=&quot;JavaScript&quot;&gt;
			var elem = document.getElementById(&#39;myCanvas&#39;);
			// elem.onClick = alert(&quot;hello world&quot;);  - displays alert without clicking
			// elem.onClick = alert(&#39;hello world&#39;);  - displays alert without clicking
			// elem.onClick = &quot;alert(&#39;hello world!&#39;)&quot;;  - does nothing, even with clicking
			// elem.onClick = function() { alert(&#39;hello world!&#39;); };  - does nothing
			// elem.onClick = function() { alert(&quot;hello world!&quot;); };  - does nothing
			var context = elem.getContext(&#39;2d&#39;);
			context.fillStyle = &#39;#05EFFF&#39;;
   			context.fillRect(0, 0, 150, 100);
		&lt;/script&gt;

	&lt;/body&gt;
&lt;/html&gt;


How do I add a simple onClick event handler to a canvas element?

i would like to make a rectangular canvas to simulate a progress bar
but it seems when i set the width and height of a canvas to 100%, it doesn&#39;t really make it as high and as wide as parent

please see example below  
http://jsfiddle.net/PQS3A/

Is it even possible to make non-squared canvas?
I don&#39;t want to hardcode the height and width of canvas, because it should change dynamically when viewed in bigger or smaller screen, including mobile devices


make canvas as wide and as high as parent

Is there possibility to convert the image present in a canvas element into an image representing by `img src`?

I need that to crop an image after some transformation and save it. There are a view functions that I found on the internet like: `FileReader()` or `ToBlop()`, `toDataURL()`, `getImageData()`, but I have no idea how to implement and use them properly in JavaScript.

This is my html:

    &lt;img src=&quot;http://picture.jpg&quot; id=&quot;picture&quot; style=&quot;display:none&quot;/&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;canvas id=&quot;transform_image&quot;&gt;&lt;/canvas&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div id=&quot;image_for_crop&quot;&gt;image from canvas&lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;

In JavaScript it should look something like this:

    $(document).ready(function() {
        img = document.getElementById(&#39;picture&#39;);
        canvas = document.getElementById(&#39;transform_image&#39;);

        if(!canvas || !canvas.getContext){
            canvas.parentNode.removeChild(canvas);
        } else {
            img.style.position = &#39;absolute&#39;;
        }
        transformImg(90);
        ShowImg(imgFile);
    }

    function transformImg(degree) {
        if (document.getElementById(&#39;transform_image&#39;)) {
            var Context = canvas.getContext(&#39;2d&#39;);
            var cx = 0, cy = 0;
            var picture = $(&#39;#picture&#39;);
            var displayedImg = {
                width: picture.width(),
                height: picture.height()
            };   
            var cw = displayedImg.width, ch = displayedImg.height
            Context.rotate(degree * Math.PI / 180);
            Context.drawImage(img, cx, cy, cw, ch);
        }
    }

    function showImg(imgFile) {
        if (!imgFile.type.match(/image.*/))
        return;

        var img = document.createElement(&quot;img&quot;); // creat img object
        img.id = &quot;pic&quot;; //I need set some id
        img.src = imgFile; // my picture representing by src
        document.getElementById(&#39;image_for_crop&#39;).appendChild(img); //my image for crop
    }

How can I change the canvas element into an `img src` image in this script? (There may be some bugs in this script.)

Can I get image from canvas element and use it in img src tag?

I get the error `Uncaught TypeError: Cannot read property &#39;getContext&#39; of null` and the important parts in files are... I am wondering since game.js is in a directory below, it cannot find canvas? What should I do?

./index.html:

    &lt;canvas id=&quot;canvas&quot; width=&quot;640&quot; height=&quot;480&quot;&gt;&lt;/canvas&gt;

./javascript/game.js:

    var Grid = function(width, height) {
            ...
        	this.draw = function() {
    		var canvas = document.getElementById(&quot;canvas&quot;);
    		if(canvas.getContext) {
    			var context = canvas.getContext(&quot;2d&quot;);
    			for(var i = 0; i &lt; width; i++) {
    				for(var j = 0; j &lt; height; j++) {
    					if(isLive(i, j)) {
    						context.fillStyle = &quot;lightblue&quot;;
    					}
    					else {
    						context.fillStyle = &quot;yellowgreen&quot;;
    					}
    					context.fillRect(i*15, j*15, 14, 14);
    				}
    			}
    		}
    	}
    }



Cannot read property &#39;getContext&#39; of null, using canvas

HTML:

      &lt;div class=&quot;canvas-wrapper&quot;&gt;
        &lt;canvas id=&quot;myCanvas&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
CSS

    .canvas-wrapper {
        width: 900px;
        min-height: 600px;
     }

     #myCanvas{
         border:1px solid red;
         position: absolute;
         top:22px;
         left:0px;
         height: 100%;
         width: 99%;
     }

JS

    var myCanvas = new fabric.Canvas(&#39;myCanvas&#39;);


My canvas get resized to 300x150 after it&#39;s been initialized, why?


Fabric.js changes my canvas size to 300x150 after initialization

I&#39;m trying to scale an image proportionately to the canvas. I&#39;m able to scale it with fixed width and height as so:

    context.drawImage(imageObj, 0, 0, 100, 100)

But I only want to resize the width and have the height resize proportionately. Something like the following:

    context.drawImage(imageObj, 0, 0, 100, auto)

I&#39;ve looked everywhere I can think of and haven&#39;t seen if this is possible.  

Canvas drawImage scaling

I am currently using http://paperjs.org to create an HTML5 canvas drawing app. I want to let users upload images into the canvas. I know I need to make a login and signup but is there an easier way? I have seen the HTML5 drag and drop upload.

How to upload image into HTML5 canvas

I&#39;m using Nihilogic&#39;s &quot;Canvas2Image&quot; JavaScript tool to convert canvas drawings to PNG images. 
What I need now is to turn those base64 strings that this tool generates, into actual PNG files on the server, using PHP.

In short, what I&#39;m currently doing is to generate a file on the client side using Canvas2Image, then retrieve the base64-encoded data and send it to the server using AJAX:

    // Generate the image file
    var image = Canvas2Image.saveAsPNG(canvas, true);	
    
    image.id = &quot;canvasimage&quot;;
    canvas.parentNode.replaceChild(image, canvas);
    								
    var url = &#39;hidden.php&#39;,
    data = $(&#39;#canvasimage&#39;).attr(&#39;src&#39;);
    
    $.ajax({ 
        type: &quot;POST&quot;, 
    	url: url,
    	dataType: &#39;text&#39;,
    	data: {
    		base64data : data
    	}
    });

At this point, &quot;hidden.php&quot; receives a data block that looks like ***data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABE...***

From this point on, I&#39;m pretty much stumped. From what I&#39;ve read, I believe that I&#39;m supposed to use PHP&#39;s *imagecreatefromstring* function, but I&#39;m not sure how to actually create an actual PNG image from the base64-encoded string and store it on my server.
Please aid!
	

How to save a PNG image server-side, from a base64 data URI

Is there a way to have an arbitrary HTML element rendered in a canvas (and then access its buffer...).


Rendering HTML elements to &lt;canvas&gt;

Many libraries I have found, like Jcrop, do not actually do the cropping, it only creates an image cropping UI. It then depends on the server doing the actual cropping.

How can I make the image cropping *client-side* by using some *HTML5 feature* without using any server-side code.

If yes, are there some examples or hints?

Content Type	Original Author	Original Content on Stackoverflow
Question	11684	View Question on Stackoverflow
Solution 1 - Html	Denis Washington	View Answer on Stackoverflow
Solution 2 - Html	Steve	View Answer on Stackoverflow
Solution 3 - Html	Peter	View Answer on Stackoverflow
Solution 4 - Html	Ed S.	View Answer on Stackoverflow

Can you use canvas.getContext('3d')? If yes, how?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

SVN "Already Locked Error"

what does "error : a nonstatic member reference must be relative to a specific object" mean?

Attributions